Calculate the working hours of an employee while format is in 12 Hours

Question

In my attendance portal, employee marks the attendance by giving CheckIn time and CheckOut time. I am using Bootstrap datetimepicker Where the time format is in 12 Hour (AM , PM). i want to calculate the total working hours per day of the employee but i'm facing the datetime format issues. So how can i calculate the total working hours per day of the employee when the format is in 12 hours (AM , PM)

 

Here's my View Code

<div class="col-md-3">
<label>Date <span class="text-danger">*</span></label>
<div id="datepicker" class="input-group date" data-link-field="dtp_input2" data-date-format="dd/mm/yyyy" data-link-format="dd/mm/yyyy">
@*<input class="form-control" type="text" readonly />*@
@Html.TextBoxFor(model => model.Date, new { @class = "form-control", autocomplete = "off" })
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br />
</div>
<div class="col-md-3">
<label>Check In <span class="text-danger">*</span></label>
@*<input type="datetime-local" id="CheckIn" name="CheckIn">*@
<div class="input-group date form_datetime" data-date="" data-date-format="mm/dd/yyyy HH:ii p" data-link-field="dtp_input1" data-link-format="mm/dd/yyyy HH:ii ">
@Html.TextBoxFor(model => model.CheckIn, new { @class = "form-control", autocomplete = "off", required = "required" })
<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>
@*<input type="datetime-local" id="CheckOut" name="CheckOut">*@
<div class="input-group date form_datetime2" data-date="" data-date-format="mm/dd/yyyy HH:ii p" data-link-field="dtp_input3" data-link-format="mm/dd/yyyy HH:ii ">
@Html.TextBoxFor(model => model.CheckOut, 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="row">
<div class="col-md-12">
<input type="button" id="save" class="btn btn-primary" value="Mark Attendance" />
@Html.ActionLink("My Attendance", "Index", "Attendance")
</div>
</div>
<script>
$("#save").click(function () {
var obj = {
Emp_Id : $(Emp_Id).val(),
Date: $("#Date").val(),
CheckIn: $("#CheckIn").val(),
CheckOut: $("#CheckOut").val(),
};
//window.location.href = "/path/to/thankyoupage"
var Url = '@Url.Action("Create", "Attendance")';
$.ajax({
url: Url,
type: "POST",
data: obj,
dataType: "html",
success: function (data) {
if (data.isError==false) {
alert(data.message);
}
}
});
})
</script>

And Here's my Controller Code

[HttpPost]
public JsonResult Create(Attendance attendance)
{
// if (attendance.Date == todayDate) return BadRequest("Too late or too early");
// var hasAttendance = db.Attendance.Any(i => i.Emp_Id = attendance.Emp_Id && i.Date == todayDate);
//DateTime tempDate = Convert.ToDateTime(attendance.Date);
if (ModelState.IsValid)
{
try
{
attendance.CheckIn = Convert.ToDateTime(attendance.CheckIn.ToString("yyyy-MM-dd HH:mm:ss"));
attendance.CheckOut = Convert.ToDateTime(attendance.CheckOut.Value.ToString("yyyy-MM-dd HH:mm:ss"));
attendance.Date = DateTime.Now;
var attdate = attendance.Date;
var nextdate = attdate.AddDays(1);
var id = Convert.ToInt32(Session["UserID"]);
var isExist = db.Attendance.FirstOrDefault(i => i.Emp_Id == id && i.Date == attdate && i.Date < nextdate);
if (isExist != null)
{
//return Content("<script language='javascript' type='text/javascript'>alert('Your Attendance is Already Marked');</script>");
//ViewBag.isExist = false;
//TempData["Msg"] = ("Your Attendance is Already Marked");
var kMessage = "Your Attendance is Already Marked";
//return RedirectToAction("Index", "Attendance", new { message = kMessage });
return Json(new { isError = false, message = kMessage });
}
else
{
//attendance.Emp_Id = id;
//var res = tempDate.Date;
db.Attendance.Add(attendance);
db.SaveChanges();
ViewBag.kMessage = "";
}
}
catch (Exception ex)
{
Console.WriteLine(ex.InnerException.Message);
}
}
return Json(new {isError=false,message="YAAAAAAAAAAAAY" });
//return RedirectToAction("Index", "Attendance");
}