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 TimePicker 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 TimePicker in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Key Features

  • Disabled TimePickerYou can use the configuration options of the TimePicker to disable the component so that users are not able to interact with it.
  • Read-only TimePickerThe TimePicker provides a configuration option for rendering it in its read-only state.
  • Time rangesWithin the TimePicker, time ranges can be defined by setting a start and end time value.
  • Incremental stepsThe TimePicker enables you to change the default step for increasing and decreasing the parts of its time values.
  • FormatsYou can control the format of the TimePicker by using its format property.
  • PlaceholdersThe TimePicker provides options for setting its input field and render a text hint or descriptions for its format sections.
  • Incomplete date validationThe incomplete date validation feature of the TimePicker ensures that users do not accidentally leave a non-required field partially populated.
  • Forms SupportYou can use the TimePicker both in template-driven and reactive Angular forms.
  • Integration with JSONAs 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.
  • GlobalizationAll Kendo UI for Angular Date Inputs provide globalization options.
  • AccessibilityThe TimePicker is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe TimePicker supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?