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 is part of Kendo UI for Angular, a professional grade UI library with 110+ 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 DatePicker in action.

Change Theme

Theme

Loading ...

Getting Started with the Kendo UI for Angular DatePicker

To get started with the Kendo UI for Angular DatePicker, you can follow the steps in the following comprehensive article: Getting Started with the Kendo UI for Angular Date Inputs.

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 Angular 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 Angular 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.
Typing control—The DatePicker provides options for controlling the typing behavior of the input field like caret mode, auto switch parts, auto switch keys, enable mouse wheel, and auto-fill.
Adaptive mode—The DatePicker provides an adaptive mode for the Calendar component, which allows you to control the visibility of the Calendar based on the screen size.
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.

Frequently Asked Questions

What is the Kendo UI for Angular DatePicker?

The Kendo UI for Angular DatePicker is a native Angular component with a modern UI that enables users to enter or pick a date value.

How to Create a DatePicker in Angular?

To create a Grid in Angular, you need to install the Kendo UI for Angular DateInputs package and then import the DatePickerModule or DateInputsModule in your application. After that, you can use the kendo-datepicker component in your Angular application. For more information, refer to the Getting Started with the Kendo UI for Angular DatePicker article.