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.

The following example demonstrates the DatePicker in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Key Features

  • Calendar optionsYou can use various options to configure the popup calendar within the DatePickerfor 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 DatePickerYou can use the configuration options of the DatePicker to disable the component so that users are not able to interact with it.
  • Read-only DatePickerThe DatePicker provides a configuration option for rendering it or its input field only in a read-only state.
  • Disabled datesThe 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 rangesWithin the DatePicker, date ranges can be defined by setting a start and end date for a period of time.
  • Fast navigation sidebarThe DatePicker supports configuration options for controlling the default navigation sidebar.
  • TemplatesYou can customize the content of each Calendar cell within the DatePicker and define a cell template.
  • FormatsYou 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.
  • PlaceholdersThe DatePicker provides options for setting its input field and render a text hint or descriptions for its format sections.
  • Incomplete date validationThe incomplete date validation feature of the DatePicker ensures that users do not accidentally leave a non-required field partially populated.
  • Forms supportYou can use the DatePicker both in template-driven and reactive Angular forms.
  • Integration with JSONAs 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.
  • GlobalizationAll Kendo UI for Angular Date Inputs provide globalization options.
  • AccessibilityThe DatePicker is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe DatePicker supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?