Javascript 在客户端的字符串中添加一小时

我有两个计时器

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

这就是它的样子

这里是从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%;">

这只会在发生更改时将To值设置为与From相同的值，但我想在其中添加一个小时或一些时间跨度

---

我该怎么做呢？

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

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 () {        
    //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());
    }
}

---

控制台错误：

Object[Object Object]没有方法“value”

@Biplov13，是的，很抱歉。我习惯于通过API而不是直接从DOM获取剑道对象，我强烈建议您也这样做。它更安全一些，因为它根据文档获取格式，并且您可以使用。我编辑了我的答案。谢谢，它也没有行

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

$('#@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());
    }
}