如何在Kendo-Timepicker中设置30分钟间隔的自定义时间选择列表？

方法1：使用内置配置快速实现 #

Kendo Timepicker自带interval配置项，直接将其设为30，就能让下拉列表显示间隔30分钟的时间选项：

$("#timepicker").kendoTimePicker({
    interval: 30, // 时间间隔设为30分钟
    format: "HH:mm" // 可选，定义时间显示格式
});

方法2：手动自定义时间列表 #

如果需要更灵活的时间范围或特殊规则的30分钟间隔时间，可以手动生成时间数组，通过dataSource绑定到组件：

// 生成从00:00到23:30的30分钟间隔时间数组
const customTimeList = [];
let currentHour = 0;
let currentMinute = 0;

while (currentHour < 24) {
    // 格式化时间为两位数字的时分格式
    const timeStr = `${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')}`;
    customTimeList.push(timeStr);
    
    currentMinute += 30;
    if (currentMinute >= 60) {
        currentMinute = 0;
        currentHour += 1;
    }
}

// 初始化Timepicker并绑定自定义列表
$("#custom-timepicker").kendoTimePicker({
    dataSource: customTimeList,
    format: "HH:mm"
});

注意事项 #

• 确保项目中已正确引入Kendo UI的JavaScript和CSS资源
• 若在Angular/React/Vue等框架中使用Kendo组件，配置逻辑一致，仅需适配对应框架的语法（比如Angular中用[interval]="30"）

内容的提问来源于stack exchange，提问作者Aiswarya Ravi