剑道 UI 时间选取器自定义间隔格式

Question

我想用kendoTimePicker做的是将30分钟间隔用于晚上11：30之前的所有时间，但在11：30之后以分钟间隔显示所有后续时间，直到12AM。不确定此控件是否支持它。

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

下午
10：30晚上11：00
下午
11：30下午11：31
下午
11：32下午
11：33..等

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...

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

Answer 2

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

var timeView = $("#timepicker").data("kendoTimePicker").timeView;
//bind list
timeView.dataBind([new Date()]);

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

尽管如此，您始终可以修改UL元素，就像CodingWithSpike建议的那样。