Kendo UI Timepicker自定义间隔格式

时间:2013-01-31 16:09:43

标签: kendo-ui

我想要使用kendoTimePicker的时间是从下午11:30开始的所有时间都有30分钟的时间间隔,但是在11:30之后显示所有后续时间直到12AM的分钟间隔。不确定此控件是否支持它。

基本上希望有类似的东西:

晚上10:30
晚上11点 晚上11:30 下午11:31
下午11:32
下午11:33
..等

2 个答案:

答案 0 :(得分:2)

我能想到的唯一方法是手动更改下拉列表中的时间列表。 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>即可操作列表。

答案 1 :(得分:0)

另一种选择是定义一个时间列表,作为Date对象。检查dates option。 每个timepicker都有timeView属性,实际上是popup元素。该对象有一个dataBind方法,它接受Date对象列表:

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

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

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

尽管如此,您始终可以修改UL元素,例如 CodingWithSpike 建议。