Bootstrap Datetime picker is not working in edit mode and getting erro

Question

In my attendance portal, Employee can select Date, Check In and Check Out through datetime picker. Datatype of 'Check In' and 'Check out' is "string". So in edit mode, datetime picker is not working and I'm get error of "getDate and getTime is not a function". I've also changed the datatype of Checkin and CheckOut to DateTime but then with time, date is also storing in database which i don't want to. So kindly please help me that how to solve this issue.

 

Here's my View Code

<div class="col-md-3">
<label>Date <span class="text-danger">*</span></label>
<div>
@*<input class="form-control" type="text" readonly />*@
@Html.TextBoxFor(model => model.Date, "{0:dd/MM/yyyy}", new { @class = "form-control datepicker", autocomplete = "off" })
</div>
<input type="hidden" id="dtp_input2" value="" /><br />
</div>
<div class="col-md-3">
<label>Check In <span class="text-danger">*</span></label>
<div class="input-group date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input1" data-link-format="hh:ii">
@Html.TextBoxFor(model => model.CheckIn, "{0:hh:mm}" , new { @class = "form-control", autocomplete = "off" })
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br />
</div>
<div class="col-md-3">
<label>Check Out</label>
<div class="input-group date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
@Html.TextBoxFor(model => model.CheckOut, "{0:hh:mm}" , new { @class = "form-control", autocomplete = "off" })
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br />
</div>
<div class="col-md-3">
<label>Short Leave (Hours)</label>
@Html.TextBoxFor(model => model.ShortLeave, new { @class = "form-control", Type = "decimal" , autocomplete = "off" })
</div>
</div>
<script>
$(function (){
$('.form_time').datetimepicker({
//language: 'fr',
format: 'hh:ii',
autoclose: 1,
});
});
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
</script>

And Here's my Controller Code

public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Attendance attendance = db.Attendance.Find(id);
if (attendance == null)
{
return HttpNotFound();
}
return View(attendance);
}
[HttpPost]
public ActionResult Edit(Attendance attendance)
{
if (ModelState.IsValid)
{
db.Entry(attendance).State = System.Data.Entity.EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index", "Attendance");
}
return View();
}