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>

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

1 个答案: