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 following example demonstrates the DateInput in action.
Example
View Source
Change Theme:
Key Features
- Disabled DateInput—You can use the configuration options of the DateInput to disable the component so that users are not able to interact with it.
- Read-only DateInput—The DateInput provides a configuration option for rendering it in its read-only state.
- Date ranges—Within the DateInput, date ranges can be defined by setting a start and end date for a period of time.
- Spin buttons—You can enable the spin buttons of the DateInput to increase or decrease the date value by adding or subtracting days.
- Incremental steps—The DateInput enables you to change the default step for increasing and decreasing the parts of its date values.
- Formats—You 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.
- Placeholders—The DateInput provides options for setting its input field and render a text hint, a floating label, or descriptions for its format sections.
- Incomplete date validation—The incomplete date validation feature of the DateInput ensures that users do not accidentally leave a non-required field partially populated.
- Forms Support—You can use the DateInput both in template-driven and reactive Angular forms.
- Integration with JSON—As the DateInput works only with
dateJavaScript 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 DateInput is accessible for screen readers and supports WAI-ARIA attributes.
- Keyboard navigation—The DateInput supports a number of keyboard shortcuts for processing various commands.
