DateTimePicker

Overview

The Kendo UI for Angular Date Time Picker component combines the Angular DatePicker and Angular TimePicker in a single component, conveniently enabling users to select both date and time slots. Users can either select a date and time using the component popups, or quickly type a date and time into the Angular DateTimePicker input using their keyboard.

See Angular DateTimePicker Overview demo.
Incremental Steps

By default, you can increase or decrease each part of the Kendo UI for Angular DateTimePicker slots by one step. To customize the step number, you can provide a custom value and control the incremental intervals of the Angular DateTimePicker date and time slots - for example, increasing the time by 15-minute increments.

See Angular DateTimePicker Incremental Steps demo.
Date and Time Ranges

The Kendo UI for Angular DateTimePicker enables the user to input any time of the day or select any valid date in the past, present and future. By modifying the min and max settings of either the date and time you can set upper and lower limits on the time slots and days users can select.

See Angular DateTimePicker Date and Time Ranges demo.
Formats

Date and time come in many formats and with its support for standard date strings, the Kendo UI for Angular DateTimePicker can handle any valid format to represent dates or times.

See Angular DateTimePicker Formats demo.
Placeholders

When dealing with dates and time, using a placeholder is a helpful way to indicate to the user what kind of date or format the component is expecting. The Kendo UI for Angular DateTimePicker can use any valid format string to define the format of the displayed date and time values.

See Angular DateTimePicker Placeholders demo.
Disabled DateTimePicker

You can disable the Kendo UI for Angular DateTimePicker to prevent users from interacting with it. With a single configuration option, the Angular DateTimePicker can toggle between being enabled or disabled.

See Angular DateTimePicker Disabled DateTimePicker demo.
Forms Support

The Kendo UI for Angular DateTimePicker supports both reactive and template-driven forms, ensuring that the Angular DateTimePicker can be integrated in any Angular form.

See Angular DateTimePicker Forms Support demo.
Globalization

The Kendo UI for Angular DateTimePicker supports globalization out of the box. This means that the component can be localized to display the date and time in a format based on the application settings or a user’s locale.

See Angular DateTimePicker Globalization demo.
Keyboard Navigation

The Kendo UI for Angular DateTimePicker supports users manually typing both the date and time into its input. It also offers the ability to open and interact with the date and time picking popups of the Angular DateTimePicker using keyboard navigation.

See Angular DateTimePicker Keyboard Navigation demo.
Accessibility

The Kendo UI for Angular DateTimePicker is AAA rated for WCAG 2.0 and compliant with both WAI-ARIA and Section 508 standards.

See Angular DateTimePicker Accessibility demo.