如何动态设置剑道UI时间选择器间隔

Question

>我有一个下拉菜单显示时间间隔 5,10,15当我更改下拉列表时，时间选择器间隔需要动态设置提前谢谢。

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>