剑道UI DateTimePicker -显示从00:30到24:00的30分钟间隔

Kendo UI DateTimePicker - Show 30 minute intervals from 00:30 till 24:00

本文关键字：30分钟 显示 UI 剑道 DateTimePicker      更新时间：2023-09-26

我使用Kendo UI DateTimePicker来接受一天中30分钟的用户输入。我明确地指定了一个30分钟的间隔(30是默认值)，我使用format和timeFormat选项来指定24小时的时间格式，如下所示。

当选择时间下拉列表时，我希望值从00:30开始并转到24:00，而不是通常的从00:00开始并转到23:30的行为。尽管使用24:00来表示午夜/一天的结束在用户界面中并不常见，但维基百科关于24小时时钟的文章表明，我们的要求并非闻所未闻。

我已经很好地浏览了DateTimePicker API文档，但我找不到任何"官方支持"的方法。在我开始深入了解小部件的JavaScript内部时，有什么想法可以帮助我吗?我也想知道我是否可以通过使用不同的文化来破解它?

要查看一个工作示例，我创建了一个示例JSFiddle

$("#periodInput").kendoDateTimePicker({
    format: "dd/MM/yyyy HH:mm",
    timeFormat: "HH:mm",
    interval: 30
});

这个剑道UI论坛发布的"TimePicker不符合IS0 8601 3.5.2关于一天中的时间午夜表示"描述了潜在的问题。我的总结是:

  • Kendo UI日期/时间选择器控件与底层JavaScript日期对象一起工作
  • ECMAScript标准声明日期时间字符串格式基于ISO 8601扩展格式，包括24:00
    • 的午夜表示。
  • 一些浏览器支持解析字符串格式24:00，但目前不是全部(Chrome 35.0, Safari 7.0)
  • 据我所知，没有浏览器支持DateTimeFormat指定符，将输出24:00为午夜。

在我看来，要用DateTimePicker解决这个问题，我将在相当低的层次上破解Kendo代码。虽然这听起来很有趣，但它可能不适合我的项目。

在检查了需求之后，我用一个DatePicker和一个单独的DropDownList替换了DateTimePicker小部件。使用单独的DropDownList允许我绑定到一个不是JavaScript Date对象的时间段列表，并且我可以显示24:00的文本表示来表示一天的最后半小时。

相关文章：