Kendo UI for Angular TimePicker Overview
The Kendo UI for Angular TimePicker represents a time-list where the user can enter or pick time values.
The following example demonstrates the Angular TimePicker in action.
Change Theme
Theme
Loading ...
Key Features
- Disabled TimePicker—You can use the configuration options of the Angular TimePicker to disable the component so that users are not able to interact with it.
- Read-only TimePicker—The TimePicker provides a configuration option for rendering it in its read-only state.
- Time ranges—Within the Angular TimePicker, time ranges can be defined by setting a start and end time value.
- Incremental steps—The TimePicker enables you to change the default step for increasing and decreasing the parts of its time values.
- Formats—You can control the format of the TimePicker by using its
format
property. - Placeholders—The TimePicker 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 TimePicker ensures that users do not accidentally leave a non-required field partially populated.
- Forms Support—You can use the Angular TimePicker both in template-driven and reactive Angular forms.
- Integration with JSON—As the TimePicker 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. - Globalization—All Kendo UI for Angular Date Inputs provide globalization options.
- Accessibility—The TimePicker is accessible for screen readers and supports WAI-ARIA attributes.
- Keyboard navigation—The Angular TimePicker supports a number of keyboard shortcuts for processing various commands.
Support and Learning Resources
- TimePicker Homepage
- Getting Started with the Kendo UI for Angular Date Inputs
- API Reference of the TimePicker
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- TimePicker Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base