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

Question

I'm using the Kendo UI DateTimePicker to accept user input for a 30 minute period of a day. I am specifying a 30 minute interval explicitly (30 is default anyway) and I am using the format and timeFormat options to specify the 24 hour time format as you can see below.

When selecting the time drop down list I would like the values to start at 00:30 and go to 24:00 rather than the usual behaviour of starting at 00:00 and going to 23:30. Although using 24:00 to indicate midnight / the end of the day isn't that common in user interfaces, the Wikipedia article on the 24 hour clock indicates our requirement is not unheard of.

I've had a pretty good look through the DateTimePicker API documentation but I can't find any "officially supported" way to do this. Any ideas to help me as I start to dive into the JavaScript guts of the widget? I also wonder if I could hack it by using a different culture?

To see a working example I've created a sample JSFiddle

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

Answer 1

This Kendo UI Forums posting "TimePicker does not conform to IS0 8601 3.5.2 on Time of Day midnight representations" describes the underlying problem. My attempted summary is:

• The Kendo UI Date/TimePicker controls work with the underlying JavaScript Date object
• The ECMAScript 5. standard states that the Date Time string format is based on the ISO 8601 Extended Format which includes the midnight representation of 24:00
• Some browsers support parsing a string format with 24:00 but not all at the moment (Chrome 35.0, Safari 7.0)
• As far as I know none of the browsers support a DateTimeFormat specifier that will output 24:00 for midnight.

It seems to me that to solve this problem using the DateTimePicker, I would be hacking away at the Kendo code at a pretty low level. While that sounds like fun, it's probably not appropriate value for my project at the moment.

After reviewing the requirements I have replaced the DateTimePicker widget with a DatePicker and a separate DropDownList. Using a separate DropDownList allows me to bind to a list of time periods that are not JavaScript Date objects and I can display a text representation of 24:00 to indicate the final half hour of the day.