Kendo UI for Angular

Angular DateTimePicker

  • Allow users to select both date and time using visual popups or keyboard inputs.
  • Part of the Kendo UI for Angular library along with 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.
Download Free Trial
Angular UI Component Library
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo

  • Overview

    The Kendo UI for Angular Date Time Picker component combines the Angular DatePicker and Angular TimePicker in a single component, conveniently enabling users to select both date and time slots. Users can either select a date and time using the component popups, or quickly type a date and time into the Angular DateTimePicker input using their keyboard.

    See Angular DateTimePicker Overview demo.

    Kendo UI for Angular DateTimePicker - Overview

  • Incremental Steps

    By default, you can increase or decrease each part of the Kendo UI for Angular DateTimePicker slots by one step. To customize the step number, you can provide a custom value and control the incremental intervals of the Angular DateTimePicker date and time slots - for example, increasing the time by 15-minute increments.

    See Angular DateTimePicker Incremental Steps demo.

    Kendo UI for Angular DateTimePicker - Incremental Steps

  • Date and Time Ranges

    The Kendo UI for Angular DateTimePicker enables the user to input any time of the day or select any valid date in the past, present and future. By modifying the min and max settings of either the date and time you can set upper and lower limits on the time slots and days users can select.

    See Angular DateTimePicker Date and Time Ranges demo.

    Kendo UI for Angular DateTimePicker - Date and Time Ranges

  • Formats

    Date and time come in many formats and with its support for standard date strings, the Kendo UI for Angular DateTimePicker can handle any valid format to represent dates or times.

    See Angular DateTimePicker Formats demo.

    Kendo UI for Angular DateTimePicker - Formats

  • Placeholders

    When dealing with dates and time, using a placeholder is a helpful way to indicate to the user what kind of date or format the component is expecting. The Kendo UI for Angular DateTimePicker can use any valid format string to define the format of the displayed date and time values.

    See Angular DateTimePicker Placeholders demo.

    Kendo UI for Angular DateTimePicker – Placeholders

  • Disabled DateTimePicker

    You can disable the Kendo UI for Angular DateTimePicker to prevent users from interacting with it. With a single configuration option, the Angular DateTimePicker can toggle between being enabled or disabled.

    See Angular DateTimePicker Disabled DateTimePicker demo.

    Kendo UI for Angular DateTimePicker - Disabled DateTimePicker

  • Forms Support

    The Kendo UI for Angular DateTimePicker supports both reactive and template-driven forms, ensuring that the Angular DateTimePicker can be integrated in any Angular form.

    See Angular DateTimePicker Forms Support demo.

    Kendo UI for Angular DateTimePicker - Forms Support

  • Globalization

    The Kendo UI for Angular DateTimePicker supports globalization out of the box. This means that the component can be localized to display the date and time in a format based on the application settings or a user’s locale.

    See Angular DateTimePicker Globalization demo.

    Kendo UI for Angular DateTimePicker - Globalization

  • Keyboard Navigation

    The Kendo UI for Angular DateTimePicker supports users manually typing both the date and time into its input. It also offers the ability to open and interact with the date and time picking popups of the Angular DateTimePicker using keyboard navigation.

    See Angular DateTimePicker Keyboard Navigation demo.

  • Accessibility

    The Kendo UI for Angular DateTimePicker is AAA rated for WCAG 2.0 and compliant with both WAI-ARIA and Section 508 standards.

    See Angular DateTimePicker Accessibility demo.

    Kendo UI for Angular - Calendar Accessibility

Frequently Asked Questions

  • What is an Angular DateTimePicker?

    An Angular DateTimePicker is a component designed to give users an interactive way to select date and time values. When the user clicks or taps on a date/time field in a form, they will see a popup with two tabs. One is a calendar and the other has numeric spinners. They pick a date from the former and a time from the latter. When the date and time slot is selected, its value will populate the field.

     

  • Why should I choose the Kendo UI for Angular DateTimePicker?

    The Kendo UI for Angular DateTimePicker has many values that make it unique. It is very easy to customize its behavior with configuration properties, it is fully accessible and data-ready. It is also part of a complete library of over 100 other components that all share common themes and API. As a result, you can easily meet functional requirements and create a clean and consistent UI.

     

  • Can I try the Angular DateTimePicker?

    Absolutely. We offer free 30-day trials of the entire Kendo for Angular library. With the trial, you get full access to all the components, design tools, learning materials, and technical support. Once you sign up for the trial, you will get an email with instructions.

  • Can I purchase the Angular DateTimePicker only?

    To simplify the purchasing process and provide as much value as we can, we offer an all-in-one JavaScript development package called Kendo UI. This package is a bundle of four component libraries for Angular, React, Vue, and jQuery. The Angular DateTimePicker is part of this library and is not available separately at this time.

     

    See all purchasing options here.

  • How is the Angular DateTimePicker normally used?

    The Angular DateTimePicker is a form control and can be used anywhere you would like to ask users to select or input a precise date and time (rather than just a date or just a time). Common use cases are selecting an appointment time when scheduling online or making a reservation at a restaurant.

  • Where can I find the Angular DateTimePicker demo?

    Not only do we meticulously document each component and each feature, but we also strive to provide an Angular TimePicker example for each. You can find our Angular DateTimePicker documentation and demos here.

  • How do I get started with the Angular DateTimePicker?

    The Angular DateTimePicker is part of the Angular Date Inputs package which includes the Calendar, DateInput, DatePicker, DateTimePicker, DateRange, MultiViewCalendar, and the TimePicker. To get started with this package in just a few steps, see the Getting Started article.

     

Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Download Free Trial
Kendo UI