DateTimePicker Overview

The Kendo UI DateTimePicker widget allows the user to select a value from a calendar, a time drop-down list, or through direct input.

The DateTimePicker supports configurable options for minimum and maximum value, format, interval between predefined hours in the time view, custom templates for the month view of the calendar, start view, and depth for navigation.

Getting Started

Initialize the DateTimePicker

To initialize the DateTimePicker, use the following example.

<input id="dateTimePicker">

<script>
  $(document).ready(function(){
    $("#dateTimePicker").kendoDateTimePicker();
  });
</script>

Important

The widget copies any styles and CSS classes from the input element to the wrapper element.

Configuration

The DateTimePicker provides many configuration options that can be set during initialization. The available properties are:

• Selected date
• Minimum and/or maximum date and time
• Format definition
• Start view
• Navigation depth (i.e., define the last view to which the user can navigate)
• Interval definition between predefined values in the time drop-down list

The first day of the week in the Calendar view depends on the applied culture.

Selected, Min, and Max Datetime

The following example demonstrates how to define selected, min, and max datetimes.

Example

<input id="dateTimePicker">

<script>
    $(document).ready(function(){
        $("#dateTimePicker").kendoDateTimePicker({
            value: new Date(2000, 10, 10, 10, 0, 0),
            min: new Date(1950, 0, 1, 8, 0, 0),
            max: new Date(2049, 11, 31, 18, 0, 0)
        })
    });
</script>

The DateTimePicker sets the value only if the entered datetime is valid and within the defined range.

Datetime Format

The following example demonstrates how to define the datetime format.

Example

<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 widget's readonly() method. Otherwise the Date and Time pop-ups sre disabled.

<input id="dateTimePicker">

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

Time Format

The following example demonstrates how to define the time format.

Example

<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>

Start View and Navigation Depth

To define the first rendered view, use the start option. To control the navigation depth, use the depth option. The following views are predefined:

• month—Shows the days of the month.
• year—Shows the months of the year.
• decade—Shows the years of the decade.
• century—Shows the decades of the century.

Selectable Month DateTimePicker

The following example demonstrates how to create a DateTimePicker with a selectable month.

Example

<input id="dateTimePicker">

<script>
    $("#dateTimePicker").kendoDateTimePicker({
        start: "year",
        depth: "year"
    });
</script>

Intervals

To define the interval (in minutes) between values in the time drop-down list, use the following example.

Example

<input id="dateTimePicker">

<script>
    $("#dateTimePicker").kendoDateTimePicker({
        interval: 15
    })
</script>

Disable Dates

The DateTimePicker enables you to disable certain days, such as weekends, national holidays, and others, which are not intended to be selected by the end user.

To disable a date, either:

• Set and array of dates, or
• Add a function to determine the return value as the date that is disabled.
  

Set an Array

When you disable dates by setting an array, list the days that need to be disabled by using the first letters from their names in English.

Example

    <input id="dateTimePicker" />

    <script>
    $("#dateTimePicker").kendoDateTimePicker({
        value: new Date(),
        disableDates: ["we", "th"],
    });
    </script>

Add a Function

When you disable dates by adding a function, determine its return value as true for the date that is disabled.

Example

    <input id="dateTimePicker" />

    <script>
        $("#dateTimePicker").kendoDateTimePicker({
            disableDates: function (date) {
                var disabled = [13,14,20,21];
                if (date && disabled.indexOf(date.getDate()) > -1 ) {
                    return true;
                } else {
                    return false;
                }
            }
        });
    </script>

Validation

The widget is designed to keep the input value unchanged, even when the typed date is invalid. This is due the following facts:

• The widget allows different date parse formats, which require unrestricted user input. For more information, refer to the parseFormats option.
• The widget does not update automatically the typed text when it is invalid. Such a change in the input value that is made by the widget, leads to unexpected behavior.

The best way to validate the DateTimePicker widget is to use a client-validation framework such as the Kendo UI Validator. In this way, you can provide a meaningful error message to the end user that prompts the right actions for them to resolve the issue. For more details, refer to the online custom validation demos.

Calendar Types

The DateTimePicker works with the JavaScript Date objects that support only the Gregorian calendar. This means that the widget does not support other calendar types.

To simulate a different calendar type, such as Lunar, use the JavaScript Date object and create a date that is in the past. The following example demonstrates how to achieve this behavior.

See Also

Other articles on the Kendo UI DateTimePicker:

• How to Prevent Invalid Values
• How to Validate Custom Dates
• How to Limit Navigation to Months
• How to Override Hours in the Popup
• Overview of the ASP.NET MVC HtmlHelper Extension for the DateTimePicker Widget
• Overview of the DateTimePicker JSP Tag
• Overview of the DateTimePicker PHP Class
• DateTimePicker JavaScript API Reference

Articles on the Kendo UI Calendar:

• Overview of the Calendar Widget
• How to Control the Header Format
• Calendar JavaScript API Reference

Articles on the Kendo UI DatePicker:

• Overview of the DatePicker Widget
• How to Set the First Weekday
• How to Create Date Masking
• How to Persist Entered Dates
• How to Resize Calendar Based on Input Width
• DatePicker JavaScript API Reference

Articles on the Kendo UI TimePicker:

• Overview of the TimePicker Widget
• TimePicker JavaScript API Reference