Date and Time Formatting

The DateTimePicker allows you to define its date and time formatting.

The following example demonstrates how to define the date-time format.

<input id="dateTimePicker"> <script> $("#dateTimePicker").kendoDateTimePicker({ format: "MM/dd/yyyy hh:mm tt" //format is used to format the value of the widget and to parse the input. }); </script>

The DateTimePicker value is parsed when the user changes the content through typing. For example, if the format contains only a time portion, the date is reset to today's date. To support such a DateTimePicker format, make the textbox of the widget read-only after the widget is initialized, and not through the readonly() method of the widget. Otherwise, the Date and Time popups will be disabled.

<input id="dateTimePicker"> <script> $("#dateTimePicker").kendoDateTimePicker({ /*...*/ }).attr("readonly", "readonly"); </script>

The following example demonstrates how to define the time format.

<input id="dateTimePicker"> <script> $("#dateTimePicker").kendoDateTimePicker({ timeFormat: "hh:mm:ss tt" // This format will be used to format the predefined values in the time list. }); </script>

See Also

• Basic Usage of the DateTimePicker (Demo)
• JavaScript API Reference of the DateTimePicker