Kendo UI for Angular
Angular TimePicker
- Give users an easy and visual way to select time from a list of available slots.
- Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
-
Type or Use Spinner Controls to Select Time Data
The Kendo UI for Angular Time Picker is an input component that gives users an interactive way to enter time values in a form. When the user clicks or taps the time input field, the component will show spinners with available slots in any combination of hours, minutes, and/or seconds. The user selects his or her value and then it is represented in the appropriate format in the input field. With a large array of configuration options, the TimePicker is a versatile component for meeting your application requirements for helping users select any time of the day.
-
Time Ranges
By setting the minimum and maximum configuration options of the Kendo UI for Angular TimePicker, you can limit the time slots available to users. Setting this available ranges helps ensure the user finds the value they need and ensures you get valid data.
-
Formats
The Kendo UI for Angular TimePicker has a format property to set the time format of the component. Standard time formats are built-in, but It can use any standard time format string for custom formats. Also, you can easily switch between 12-hour and 24-hour clocks.
-
Placeholders
With the placeholder feature of the Angular TimePicker component, you can provide a custom string to give users a contextual cue about what information they are expected to enter. For example, you can demonstrate the required format or you can show a hint that reads "select your desired time."
-
Adaptive Mode
The TimePicker adaptive mode enables a mobile-friendly rendering of its calendar popup. Simply set the AdaptiveMode parameter to AdaptiveMode.Auto and this will trigger the component to automatically adapt to the current screen size and adapt its rendering accordingly. The adaptive mode for the TimePicker component also enables you to define the title text rendered in the popup header.
-
Disabled TimePicker
You can disable the Kendo UI for Angular TimePicker in order to prevent user interactions until certain requirements have been met. With the enabled property set to either true or false, the Angular TimePicker can toggle between enabled and disabled states.
-
Read-Only TimePicker
The read-only mode allows you to display the Kendo UI for Angular TimePicker, while preventing users from modifying its current value.
-
Forms Support
The Kendo UI for Angular TimePicker supports both template-driven forms and Reactive forms. Since this component is primarily used in forms, our goal is to make it as universal as possible.
-
Globalization
With support for various time formats, as well as the ability to translate built-in strings, the Kendo UI for Angular TimePicker is perfectly equipped for any globalization and internationalization scenarios.
-
Keyboard Navigation
Thanks to keyboard navigation, users can navigate through and interact with the Kendo UI for Angular TimePicker using their keyboard. This includes manually typing in a time slot as well as accessing the popup that shows all available time slots.
-
Accessibility
The Kendo UI for Angular TimePicker supports Section 508 and WAI-ARIA standards, and has an AAA rating with WCAG 2.0.
Get Started with Kendo UI for Angular
