React DateTimePicker

  • This highly customizable component makes picking the date and time in a single UI component as easy as a couple of clicks for the user.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The React DateTimePicker component, part of KendoReact, combines the ability to select both a date and a specific time of day through a highly-customizable component. Users can quickly type in a date and time in the input of the component, or work with the calendar and time picker that appear in a popup to make picking the date and time as easy as a couple of clicks.

    See React DateTimePicker Overview demo

    React DateTimePicker – Overview, KendoReact UI Library
  • Disabled DateTimePicker

    Certain requirements will call for the KendoReact DateTimePicker to be disabled and provide a visual indication that the component cannot be interacted with. Through a single property, which can be updated on the fly, the DateTimePicker can switch between enabled and disabled states.

    See React DateTimePicker Disabled demo

    React DateTimePicker – Disabled, KendoReact UI Library
  • Default Value

    By default, the value of the KendoReact DateTimePicker is empty and the popup containing the calendar and time picker only appears when the component is interacted with. Through a couple of configuration options, the React DateTimePicker can initially render with the popup already open, and the default value of both the date and time can already be defined.

    See React DateTimePicker Default Value demo

    React DateTimePicker – Default Value, KendoReact UI Library
  • Focused Dates

    The calendar featured in the KendoReact DateTimePicker always has a focused date, a date that is highlighted and rendered differently from other dates on the calendar. By default, this is today’s date, but focus can be applied to any other date through a single property.

    See React DateTimePicker Focused Dates demo

    React DateTimePicker – Focused Dates, KendoReact UI Library
  • Date and Time Limits

    The KendoReact DateTimePicker can handle the full 24-hour clock and can select from any day in the past or the future, which may be too broad of a range for your application. With the Date and Time Limit feature, the React DateTimePicker can limit the available dates and time slots that users can select from, and also prevent users from typing in values outside of these ranges.

    See React DateTimePicker Date and Time Limits demo

    React DateTimePicker – Date and Time Limits, KendoReact UI Library
  • Formats

    Date and time can be represented in various formats and the KendoReact DateTimePicker is ready to handle them all thanks to support for valid standard date and time format strings.

    See React DateTimePicker Formats demo

    React DateTimePicker – Formats, KendoReact UI Library
  • Floating Label

    The React DateTimePicker supports adding floating labels as part of its input. This feature displays an initial message within the component, which then floats outside the component when the user enters the input. The floating label is then replaced by the mask of the component, ensuring that users are aware of the content format they should adhere to.

    See React DateTimePicker Floating Label demo

    React DateTimePicker Floating Label
  • Placeholders

    When dealing with dates and time using a placeholder to indicate to the user exactly what kind of date of format the component is expecting can be extremely useful. The KendoReact DateTimePicker can use any valid format string to define the format of the displayed date and time values.

    See React DateTimePicker Placeholders demo

    React DateTimePicker – Placeholders, KendoReact UI Library
  • Forms Support

    The KendoReact DateTimePicker is a perfect component to be used with a form element when both a date and a time need to be selected without having two different components responsible for each portion. As a part of this, the DateTimePicker can integrate in to any form, whether it is a HTML form, a KendoReact Form or a form built by any React form library.

    See React DateTimePicker Forms Support demo

    React DateTimePicker – Forms Support, KendoReact UI Library
  • Globalization

    The KendoReact DateInput component supports globalization out of the box, which means that the format of the date placeholder and date can change depending on the locale of the user without needing to manually reconfigure the React component.

    See React DateInput Globalization demo

    React DateTimePicker – Globalization, KendoReact UI Library
  • Controlled and Uncontrolled Modes

    React components in forms come in two flavors: control and uncontrolled. Uncontrolled components enable the form data to be controlled directly by the DOM. Controlled components enable the form data to be handled by a React component. By default, the KendoReact DateTimePicker is an uncontrolled component, but can easily transition to a controlled component by working with a few configuration options.

    See React DateTimePicker Controlled and Uncontrolled Modes demo

  • Keyboard Navigation

    The KendoReact DateTimePicker includes a few different ways to select a day and time using keyboard navigation. This includes typing in the date and time slot, incrementing the value of each value with the arrow keys, or opening the calendar and time picker in order to traverse through the displayed interface to select a date and time.

    See React DateTimePicker Keyboard Navigation demo

  • Accessibility

    Continuing a tradition of putting accessibility at the forefront of building React UI components, the KendoReact DateTimePicker is AAA rated for WCAG 2.0, and compliant with both WAI-ARIA and Section 508 standards.

    See React DateTimePicker Accessibility demo

    React Accessibility - KendoReact

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.