kendo-ui - 如何动态设置 Kendo UI TimePicker 间隔？

Question

当我更改下拉菜单时，我有一个下拉菜单显示时间间隔 5、10、15，timepicker 间隔需要动态设置，提前致谢。

Answer 1

每当在下拉菜单中选择一个新值时，您应该使用setOptions时间选择器的方法。就像是：

var tp = $("#timepicker").data("kendoTimePicker");
$("#intervals").kendoDropDownList({
    change: function(e) {
        tp.setOptions({interval: this.value()});
    }
}

检查以下代码片段。

// create TimePicker from input HTML element
var tp = $("#timepicker").kendoTimePicker({
  dateInput: true
}).data("kendoTimePicker");

// Intercept change on Dropdown
$("#intervals").kendoDropDownList({
  change: function(e) {
    // Set new time interval
    tp.setOptions({
      interval: this.value()
    });
  }
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.bootstrap.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>

<input id="timepicker" value="10:00 AM" title="timepicker" style="width: 100%;" />
<select id="intervals">
  <option>5</option>
  <option>10</option>
  <option>15</option>
</select>