Kendo UI DateTimePicker - Показать 30-минутные интервалы с 00:30 до 24:00

Я использую Kendo UT DateTimePicker, чтобы принимать пользовательский ввод в течение 30-минутного периода дня. Я явно указываю 30-минутный интервал (30 по умолчанию в любом случае), и я использую параметры format и timeFormat, чтобы указать 24-часовой формат времени, как вы можете видеть ниже.

При выборе выпадающего списка времени я бы хотел, чтобы значения начинались в 00:30 и переходили в 24:00, а не в обычное поведение, начиная с 00:00 и заканчивая 23:30. Хотя использование 24:00 для обозначения полуночи / конца дня не является обычным явлением в пользовательских интерфейсах, статья в Википедии о 24-часовых часах указывает, что наше требование не является неслыханным.

Я довольно хорошо просматривал документацию по API DateTimePicker, но не могу найти "официально поддерживаемый" способ сделать это. Любые идеи, чтобы помочь мне, как я начинаю погружаться в кишки JavaScript виджета? Мне также интересно, смогу ли я взломать его, используя другую культуру?

Чтобы увидеть рабочий пример, я создал образец JSFiddle

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

1 ответ

Решение

Эта публикация на форумах пользовательского интерфейса Kendo "TimePicker не соответствует IS0 8601 3.5.2 для представлений полуночи по времени дня" описывает основную проблему. Моя попытка резюме:

  • Элементы управления Kendo UI Date/TimePicker работают с базовым объектом JavaScript Date
  • Стандарт ECMAScript 5. утверждает, что формат строки даты и времени основан на расширенном формате ISO 8601, который включает полночное представление 24:00.
  • Некоторые браузеры поддерживают синтаксический анализ формата строки с 24:00, но не все в данный момент (Chrome 35.0, Safari 7.0)
  • Насколько я знаю, ни один из браузеров не поддерживает спецификатор DateTimeFormat, который будет выводить 24:00 для полуночи.

Мне кажется, что для решения этой проблемы с помощью DateTimePicker, я бы взломал код кендо на довольно низком уровне. Хотя это звучит весело, это, вероятно, не подходит для моего проекта на данный момент.

После рассмотрения требований я заменил виджет DateTimePicker на DatePicker и отдельный DropDownList. Использование отдельного DropDownList позволяет мне связывать со списком периодов времени, которые не являются объектами JavaScript Date, и я могу отображать текстовое представление 24:00, чтобы указать последние полчаса дня.

Другие вопросы по тегам