Kendo UI for 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 more than 100 professionally-designed components developers trust for all their Angular UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms and a 3-million-strong developer community.

Angular UI Component Library
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo

  • Overview

    The Kendo UI for Angular Time Picker component represents a list of available time slots. With a large array of configuration options, the TimePicker is a versatile component for allowing users to select any time of the day.

    See Angular TimePicker Overview demo.

    Kendo UI for Angular TimePicker - Overview

  • 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.

    See Angular TimePicker Time Ranges demo.

    Kendo UI for Angular TimePicker - Time Ranges

  • Formats

    The Kendo UI for Angular TimePicker has a format property to set the time format of the component. It can use any standard time format string for custom formats and help you easily switch between 12-hour and 24-hour clocks.

    See Angular TimePicker Formats demo.

    Kendo UI for Angular TimePicker - Formats

  • Placeholders

    With the placeholder feature of the component, you can provide a custom string in the TimePicker to give users a contextual cue about what information they are expected to enter into the component input field.

    See Angular TimePicker Placeholders demo.

    Kendo UI for Angular TimePicker - Placeholders

  • 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.

    See Angular TimePicker Disabled TimePicker demo.

    Kendo UI for Angular TimePicker - Disabled

  • 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.

    See Angular TimePicker Read-Only TimePicker demo.

    Kendo UI for Angular TimePicker - Read-Only TimePicker

  • Forms Support

    The Kendo UI for Angular TimePicker supports both template-driven forms and Reactive forms.

    See Angular TimePicker Forms Support demo.

    Kendo UI for Angular TimePicker - Forms Support

  • 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.

    Kendo UI for Angular TimePicker Globalization demo.

    Kendo UI for Angular TimePicker - Globalization

  • 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.

    See Angular TimePicker Keyboard Navigation demo.

  • Accessibility

    The Kendo UI for Angular TimePicker supports Section 508 and WAI-ARIA standards, and has an AAA rating with WCAG 2.0.

    See Angular TimePicker Accessibility demo.

    Kendo UI for Angular - Calendar Accessibility
Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Download Free Trial
Kendo UI