Edit this page

TimePicker Overview

The Kendo UI TimePicker widget enables users to select time values from a predefined list or enter new ones.

It supports configurable options for the format, minimum and maximum time, and interval between the predefined values in the list.

Getting Started

Initialize the TimePicker

To initialize the DatePicker, use an id selector.

Example
<input id="timePicker" />

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

Important

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

Configuration

The DatePicker provides default configuration options that can be set during initialization. The available settings are:

  • Selected time
  • Minimum and/or maximum time
  • Time format
  • Define interval between predefined values in the list

Selected, Minimum, and Maximum Time

The following example demonstrates how to define the selected, minimum, and maximum times.

Example
<input id="timePicker" />

<script>
    $("#timePicker").kendoTimePicker({
        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 TimePicker sets the value only if the entered time is valid and within the defined range.

Time Format

The following example demonstrates how to define the time format.

Example
<input id="timePicker" />

<script>
    $("#timePicker").kendoTimePicker({
        format: "hh:mm:ss tt"
    });
</script>

Interval between List Values

The following example demonstrates how to define the interval in minutes between values in the list.

Example
<input id="timePicker" />

<script>
    $("#timePicker").kendoTimePicker({
        interval: 15
    });
</script>

Validation

The widget keeps the input value unchanged, even when the typed date is invalid. This behavior results because of the following reasons:

  • The widget allows different date parse formats which require unrestricted user input. For more information, refer to the parseFormats option.
  • The widget does not automatically update the typed text when it is invalid. If the widget changes the input value, this leads to unexpected behavior.

The best way to validate the TimePicker is to use a client-validation framework such as the Kendo UI Validator. It enables you to provide end users with meaningful error message and point them to the right actions to resolve an issue. For more information, refer to the online validation demos.

See Also

Other articles on the Kendo UI TimePicker:

Articles on the Kendo UI DatePicker:

Articles on the Kendo UI DateTimePicker:

Articles on the Kendo UI Calendar:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy