在客户端添加一小时到字符串

Question

我的观点中有两个时间戳

  @Html.Kendo().TimePickerFor(m=>m.AttendeeStartTime).Format("HH:mm")
  @Html.Kendo().TimePickerFor(m=>m.AttendeeEndTime).Format("HH:mm")

这就是它的样子

此处为From Timepicker呈现HTML，

  <input data-val="true" data-val-required="The AttendeeStartTime field is required." 
id="AttendeeStartTime" name="AttendeeStartTime" type="text" value="09:00" data-role="timepicker" 
class="k-input valid" role="textbox" aria-haspopup="true" aria-expanded="false" aria-
owns="AttendeeStartTime_timeview" aria-disabled="false" aria-readonly="false" style="width: 100%;">

每当From timepicker发生变化时，如何为其值添加一小时并设置为To timepicker？ 这就是我所做的，

  $('#@Html.IdFor(m=>m.AttendeeStartTime)').on('change', function () {
        //var date = new Date();
        endTime.value($(this).val());
        alert(endTime.value());

这只会在有变化时将To值设置为与From相同，但我想为它添加一小时或一些时间。

我该怎么做？

Answer 1

使用此：

$('#@Html.IdFor(m=>m.AttendeeStartTime)').on('change', function () {        
    //try getting the date from the date picker
    var date = $("#@Html.IdFor(m=>m.AttendeeStartTime)").data("kendoTimePicker").value();
    if (date) {
       //convert the string to a date
       date = new Date(date); //you can probably skip this step since the Kendo DatePicker returns a Date object
       //increase the "hours"                               
       date.setHours(date.getHours() + 1);
       //set it back in the "to" date picker
       $("#@Html.IdFor(m=>m.AttendeeEndTime)").data("kendoTimePicker").value(date);
       //alert(endTime.value());
    }
}

Answer 2

您可以编写这样的自定义函数，

function addMinutes(time, minsToAdd) {
  function z(n){ return (n<10? '0':'') + n;};
  var bits = time.split(':');
  var mins = bits[0]*60 + +bits[1] + +minsToAdd;

  return z(mins%(24*60)/60 | 0) + ':' + z(mins%60);  
}  

addMinutes('05:40', '20');  // '06:00'
addMinutes('23:50', 20);

你的情景应该是，

 $('#@Html.IdFor(m=>m.AttendeeStartTime)').on('change', function () {
        //var date = new Date();
        endTime.value($(this).val());
        addMinutes($(this).val(), '60');
        alert(endTime.value());