Kendo UI for Angular DateInput Overview

The Kendo UI for Angular DateInput represents an input field that recognizes and formats scheduling values such as dates.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Key Features

  • Disabled DateInputYou can use the configuration options of the DateInput to disable the component so that users are not able to interact with it.
  • Read-only DateInputThe DateInput provides a configuration option for rendering it in its read-only state.
  • Date rangesWithin the DateInput, date ranges can be defined by setting a start and end date for a period of time.
  • Spin buttonsYou can enable the spin buttons of the DateInput to increase or decrease the date value by adding or subtracting days.
  • Incremental stepsThe DateInput enables you to change the default step for increasing and decreasing the parts of its date values.
  • FormatsYou can display the DateInput 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 DateInput provides options for setting its input field and render a text hint, a floating label, or descriptions for its format sections.
  • Incomplete date validationThe incomplete date validation feature of the DateInput ensures that users do not accidentally leave a non-required field partially populated.
  • Forms SupportYou can use the DateInput both in template-driven and reactive Angular forms.
  • Integration with JSONAs the DateInput 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 DateInput is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe DateInput supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?