'Kendo Timepicker not binding/saving to EditorTemplate field

I have a Kendo grid built into my MVC view for repeating fields. Every field saves back (including dates, dropdowns) however when I investigate the Kendo timepicker on Google developer tools, it displays as date and time (i.e. 08/04/2022 11:07) and therefore won't save back to my field. I had the datatype for my field in my SQL database set as time(7). I changed this to datetime to test if the field would save and this worked, however it saves the date and time. I don't need the date here as I'm saving in a separate field.

Is there a way to bind the field to save just the time in Kendo without setting the datatype for the database field as datetime? Or even extracting the time only from the datetime field and saving only the time portion?

Kendo Grid

@(Html.Kendo().Grid<ManagerPortal.ViewModel.OvertimeHoursVM>()
      .Name("OTHoursGridReq")
      .ToolBar(tb => tb.Create())
      .Columns(columns =>
      {
          columns.Bound(p => p.OvertimeHoursID).Visible(false);
          columns.Bound(p => p.OvertimeDateFrom).Format("{0:ddd dd/MM/yyyy}");
          columns.Bound(p => p.OvertimeDateFromTime).Format("{0:hh:mm:ss tt}").EditorTemplateName("OTHoursTable");
          columns.Bound(p => p.OvertimeDateTo).Format("{0:ddd dd/MM/yyyy}"); ;
          columns.Bound(p => p.OvertimeDateToTime).Format("{0:hh:mm:ss tt}");
          columns.Bound(p => p.OvertimeTypeString).Title("Overtime Type");
          columns.Bound(p => p.ReasonForOvertime);
          columns.Bound(p => p.OvertimeHours).Format("{0:n2}").ClientFooterTemplate("Total OT Hours #=sum#");
          columns.Command(command =>
          {
              command.Custom("otHoursGridUpdate").Text("Edit");
          });
      })
      .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("OTHoursTable").Window(w => w.Width(700).Title("Overtime Details")))
      .Navigatable()
      .DataSource(ds => ds
      .Ajax()
      .ServerOperation(false)
      .AutoSync(false)
      .Aggregates(agg =>
      {
          agg.Add(p => p.OvertimeHours).Sum();
      })
      .Model(model =>
      {
          model.Id(p => p.OvertimeHoursID);
          model.Field(p => p.OvertimeDateFrom).Editable(true);
          model.Field(p => p.OvertimeDateFromTime).Editable(true);
          model.Field(p => p.OvertimeDateTo).Editable(true);
          model.Field(p => p.OvertimeDateToTime).Editable(true);
          model.Field(p => p.OvertimeType).Editable(true);
          model.Field(p => p.ReasonForOvertime).Editable(true);
          model.Field(p => p.OvertimeHours).Editable(false);
      })
      .Read(read => read.Action("ReadOTHours", "Requests", new { id = ViewBag.otReqID }))
      .Create(create => create.Action("CreateOTHours", "Requests", new { id = ViewBag.otReqID }))
      .Update(update => update.Action("UpdateOTHours", "Requests").Data("getRequestID"))
      )
    )

EditorTemplate

@Html.LabelFor(Model => Model.OvertimeDateFromTime, "Overtime Time From", htmlAttributes: new { @class = "control-label col-md-10" })
<div class="col-md-10">
    @(Html.Kendo().TimePicker()
              .Name("OvertimeDateFromTime")                  
              .HtmlAttributes(new { style = "width:100%;" })
        )
</div>

I've also tried

@Html.LabelFor(Model => Model.OvertimeDateFromTime, "Overtime Time From", htmlAttributes: new { @class = "control-label col-md-10" })
    <div class="col-md-10">
        @(Html.Kendo().TimePickerFor(m=>m.OvertimeDateFromTime)
          .Name("OvertimeDateFromTime")
          .Value(Model.OvertimeDateToTime)
          .Culture("en-GB")
          .Format("HH:mm")
          .ParseFormats(new[] { "HHmm" })
          .HtmlAttributes(new { style = "width:100%;"})
    )
    </div>

Controller

 [HttpPost]
    public ActionResult CreateOTHours([DataSourceRequest] DataSourceRequest request, OvertimeHoursVM hoursVM, string id)
    {
        if (hoursVM != null && ModelState.IsValid)
        {
            OvertimeHour existingOTHours = db.OvertimeHours.FirstOrDefault(h => h.OvertimeRequestID == id && h.OvertimeHoursID == hoursVM.OvertimeHoursID);

            if (existingOTHours != null)
            {
                //OT Hours already exist
                existingOTHours.OvertimeDateFrom = hoursVM.OvertimeDateFrom;
                existingOTHours.OvertimeDateTo = hoursVM.OvertimeDateTo;
                existingOTHours.OvertimeType = hoursVM.OvertimeType;
                existingOTHours.ReasonForOvertime = hoursVM.ReasonForOvertime;
                existingOTHours.OvertimeDateFromTime = hoursVM.OvertimeDateFromTime;
                existingOTHours.OvertimeDateToTime = hoursVM.OvertimeDateToTime;
            }
            else
            {
                //No OT Hours added yet
                OvertimeHour newOTHours = new OvertimeHour()
                {
                    OvertimeHoursID = hoursVM.OvertimeHoursID,
                    OvertimeRequestID = id,
                    OvertimeDateFrom = hoursVM.OvertimeDateFrom,
                    OvertimeDateFromTime = hoursVM.OvertimeDateFromTime,
                    OvertimeDateTo = hoursVM.OvertimeDateTo,
                    OvertimeDateToTime = hoursVM.OvertimeDateToTime,
                    OvertimeType = hoursVM.OvertimeType,
                    ReasonForOvertime = hoursVM.ReasonForOvertime
                };
                db.OvertimeHours.Add(newOTHours);
            }
            db.SaveChanges();
        }
        return Json(new[] { hoursVM }.ToDataSourceResult(request));
    }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source