Calculate the working hours of an employee while format is in 12 Hours (AM , PM)

Question

In my attendance portal, employees mark attendance by giving a 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 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");
        }