Components / Date Inputs / DateTimePicker / Overview / 

Kendo UI for Angular DateTimePicker Overview

The Kendo UI for Angular DateTimePicker enables the user to select date and time values.

The component combines the Kendo UI DateInput, Calendar, and TimePicker.

The DateTimePicker Component is part of Kendo UI for Angular, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Start Free Trial

The following example demonstrates the Angular DateTimePicker in action.

Example
View Source
Change Theme:

Key Features

  • Calendar options—You can use various options to configure the popup calendar within the Angular DateTimePicker—for example, switch between different calendar layouts, handle the animation of the calendar navigation, set the focused dates, and more.
  • Disabled DateTimePicker—You can use the configuration options of the DateTimePicker to disable the component so that users are not able to interact with it.
  • Read-only DateTimePicker—The DateTimePicker provides a configuration option for rendering it or its input field only in a read-only state.
  • Date and time ranges—Within the DateTimePicker, date and time ranges can be defined by setting a start and end date for a period of time.
  • Disabled dates—The Angular DateTimePicker supports specific approaches for disabling a selection of dates such as through using a function, an array of dates, or an array of days.
  • Formats—You can display the DateTimePicker in its single format at all times or configure it to show the value in different formats when the input is focused or blurred.
  • Placeholders—The DateTimePicker provides options for setting its input field and render a text hint, a floating label, or descriptions for its format sections.
  • Incremental steps—The DateTimePicker enables you to change the default step for increasing and decreasing the parts of its date values.
  • Popup options—The Angular DateTimePicker provides a number of options for customizing the popup, toggling its Cancel button, and more.
  • Templates—You can customize the content of each Calendar cell within the DateTimePicker and define a cell template.
  • Forms support—You can use the DateTimePicker both in template-driven and reactive Angular forms.
  • Integration with JSON—As the DateTimePicker works only with date JavaScript instances while the received data from the server is serialized in a JSON format, the component provides options for binding it to dates which are serialized as strings.
  • Globalization—All Kendo UI for Angular Date Inputs provide globalization options.
  • Accessibility—The Angular DateTimePicker is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The DateTimePicker supports a number of keyboard shortcuts for processing various commands.

Support and Learning Resources

Additional Resources

Previous
Keyboard Navigation
Next
Disabled DateTimePicker

In this article

Not finding the help you need?

Contact Support