New to Kendo UI for Angular? Start a free 30-day trial

Formats

You can control the format of the DatePicker by using the format property.

The component can be configured either to display a single format at all times, or to display the value in different formats when the input is focused or blurred.

Single Format

To configure the component to display a single format at all times, provide to the format property a string value. By default, it is set to 'd'.

For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

Example
View Source
Change Theme:

Display and Input Formats

To configure the component to display different formats when focused and when blurred, provide to the format property a FormatSettings object with inputFormat and displayFormat specified. The inputFormat will be used when the input is focused, and the displayFormat when blurred.

Example
View Source
Change Theme:

Two-Digit Year Format

When the DatePicker format includes a two-digit year, the value will automatically be normalized to the current or previous century.

Whether the value will be assumed to be from the current or previous century is controlled by the twoDigitYearMax property. If the typed value is less than or equal to the twoDigitYearMax value, the date will be assumed to be from the current century. If it's more than it, the date will be assumed to be from the previous century.

By default, the twoDigitYearMax is set to 68.

Values selected from the popup Calendar are not normalized. To prevent the user from selecting an out-of-range value from it, provide the DatePicker with the desired min and max values.

Example
View Source
Change Theme: