React DateTimePicker

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

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 React DateTimePicker component supports globalization out of the box. This helps localize the displayed date and time to a user’s locale and settings and can also change the calendar and time picking elements of the popup to be localized to the end user’s language of choice.

See React DateTimePicker 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 DateTimePicker - Accessibility, KendoReact UI Library

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.