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.
Start Free Trial
The following example demonstrates the DateInput in action.
Change Theme
Theme
Loading ...
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.
Support and Learning Resources
- DateInput Homepage
- Getting Started with the Kendo UI for Angular Date Inputs
- API Reference of the DateInput
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- DateInput Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base