Components / Date Inputs / DatePicker / Overview / 

Kendo UI for Angular DatePicker Overview

The Kendo UI for Angular DatePicker combines the Kendo UI DateInput and Calendar components.

It enables the user to enter or pick a date value.

The DatePicker 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 DatePicker in action.

Example
View Source
Change Theme:

Key Features

  • Calendar options—You can use various options to configure the popup calendar within the DatePicker—for example, switch between different calendar layouts, handle the animation of the calendar navigation, set the focused dates and the initially loaded calendar page, and more.
  • Disabled DatePicker—You can use the configuration options of the DatePicker to disable the component so that users are not able to interact with it.
  • Read-only DatePicker—The DatePicker provides a configuration option for rendering it or its input field only in a read-only state.
  • Disabled dates—The DatePicker supports specific approaches for disabling a selection of dates such as through using a function, an array of dates, or an array of days.
  • Date ranges—Within the DatePicker, date ranges can be defined by setting a start and end date for a period of time.
  • Fast navigation sidebar—The DatePicker supports configuration options for controlling the default navigation sidebar.
  • Templates—You can customize the content of each Calendar cell within the DatePicker and define a cell template.
  • Formats—You can display the DatePicker 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 DatePicker provides options for setting its input field and render a text hint or descriptions for its format sections.
  • Incomplete date validation—The incomplete date validation feature of the DatePicker ensures that users do not accidentally leave a non-required field partially populated.
  • Forms support—You can use the DatePicker both in template-driven and reactive Angular forms.
  • Integration with JSON—As the DatePicker 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 DatePicker is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The DatePicker supports a number of keyboard shortcuts for processing various commands.

Support and Learning Resources

Additional Resources

Previous
Keyboard Navigation
Next
Calendar Options

In this article

Not finding the help you need?

Contact Support