kendo-ui - Kendo UI Timepicker 自定义间隔格式

Question

我希望用 kendoTimePicker 做的事情是在晚上 11:30 之前的所有时间都有 30 分钟的间隔，但在 11:30 之后显示所有后续时间，直到凌晨 12 点。不确定这个控件是否支持它。

基本上希望有这样的东西：

10:30 PM
11:00 PM
11:30 PM
11:31 PM
11:32 PM
11:33 PM
..等

Answer 1

我能想到的唯一方法是手动更改下拉列表中的时间列表。Kendo 只是动态地将一个<ul>显示为弹出窗口的页面添加到您的页面，因此您可以自己清除和重建列表。

就像是：

<input id="timepicker" />

$("#timepicker").kendoTimePicker();
var listOfTimes = $("#timepicker_timeview");

// remove all existing <li> elements
listOfTimes.empty();

// add the times you want...
listOfTimes.append('<li tabindex="-1" role="option" class="k-item" unselectable="on">12:00 PM</li>');
listOfTimes.append('<li tabindex="-1" role="option" class="k-item" unselectable="on">12:01 PM</li>');
listOfTimes.append('<li tabindex="-1" role="option" class="k-item" unselectable="on">12:02 PM</li>');
// ...etc...

或者从一个完全填充的列表开始，然后删除您不想要的列表。无论哪种方式，您都可以通过<ul>使用 jQuery 编辑来操作列表。

Answer 2

另一种选择是将时间列表定义为 Date 对象。检查日期选项。每个 timepicker 都有 timeView 属性，它实际上是弹出元素。这个对象有一个 dataBind 方法，它接受一个 Date 对象的列表：

var timeView = $("#timepicker").data("kendoTimePicker").timeView;

//bind list
timeView.dataBind([new Date()]);

您可以使用此方法动态更新可用时间列表。

不过，您始终可以修改 UL 元素，就像CodingWithSpike建议的那样。