background

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 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
DateTimePicker used as a form input
  • Give Users Convenient Controls to Select Date and Time

    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 the 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 the 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 the 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 the Angular DateTimePicker Formats demo

    Kendo UI for Angular DateTimePicker - Formats
  • Placeholders

    When dealing with dates and times, 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 the Angular DateTimePicker Placeholders demo

    Kendo UI for Angular DateTimePicker – Placeholders
  • Adaptive Mode

    The DateTimePicker 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 DateTimePicker component also enables you to define the title text rendered in the popup header.

    See the Angular DateTimePicker Adaptive Mode demo

    DateTimePicker Adaptive Rendering
  • 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 the 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 into any Angular form.

    See the 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 the 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 the Angular DateTimePicker Keyboard Navigation demo

    Keyboard Navigation
  • 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 the Angular DateTimePicker Accessibility demo

    Accessibility
  • We support every popular web development framework and strive for parity among our component libraries. You can find the DateTimePicker for these popular platforms:

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.

All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka