New to Kendo UI for jQuery? Start a free 30-day trial
Date and Time Formatting
Updated on Dec 10, 2025
The DateTimePicker allows you to define its date and time formatting.
The following example demonstrates how to define the date-time format.
html
<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.
html
<input id="dateTimePicker">
<script>
$("#dateTimePicker").kendoDateTimePicker({
/*...*/
}).attr("readonly", "readonly");
</script>The following example demonstrates how to define the time format.
html
<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>