React DateTimePicker

The React DateTimePicker component provides a unified input to select both date and time. It supports keyboard navigation, min/max constraints, custom formatting, popup/dialog rendering, and more.

Getting started

To create a new Vite project, refer to the Vite documentation. Once your project runs with default settings, add the React DateTimePicker component.

Installing Syncfusion React packages

Install the @syncfusion/react-calendars package:

npm install @syncfusion/react-calendars

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the DateTimePicker component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-calendars/styles/material.css';

Adding DateTimePicker component

Import and use the DateTimePicker in your app:

import { DateTimePicker } from '@syncfusion/react-calendars';

export default function App() {
  return (
    <div className="component-section">
      <DateTimePicker placeholder="Choose date & time" style={{ width: '300px' }} />
    </div>
  );
};

Run the project

npm run dev

The DateTimePicker brings together date and time selection in one UI, enabling users to enter or pick precise date and time values.

Controlled vs Uncontrolled

The DateTimePicker supports both controlled and uncontrolled modes. In controlled mode, the parent component owns the value and supplies it via the value prop, updating it through onChange, ensuring the picker’s state is fully driven by external logic. In uncontrolled mode, the component manages its own internal value, with defaultValue providing the initial state, making it independent of external state management.

Formats

The DateTimePicker component supports customizing how its value is formatted through the format prop. This property accepts standard date‑time format strings and defines the pattern used when displaying the selected value.

Dialog Mode

The DateTimePicker supports dialog-style rendering through the pickerVariant property. Setting pickerVariant to Popup opens the DateTimePicker in a modal-like popup, providing a dialog-style interaction.

Appearance

Variants

The DateTimePicker supports Standard, Outlined, and Filled variants, giving you flexibility in how it looks within your layout.

Float Label

The DateTimePicker component supports different label display modes through the labelMode property. This property controls how the label or placeholder text appears in relation to the input field.

Available label mode options:

• "Never": The label will never float in the input when the placeholder is available.
• "Always": The floating label will always float above the input.
• "Auto": The floating label will float above the input after focusing or entering a value in the input.

Disabled

The DateTimePicker can be disabled to prevent user interaction. This is useful when you want to block date‑and‑time selection temporarily, such as during form validation or when certain conditions are not met. You can disable the DateTimePicker by setting the disabled property to true.

ReadOnly

The DateTimePicker also supports a read‑only mode, allowing users to view the selected date and time without being able to modify it. This is helpful when the value is controlled by another process or when edits should be prevented in specific scenarios. You can enable read‑only mode by setting the readOnly property to true.

Forms Support

A practical appointment booking example that demonstrates DateTimePicker validation props in a real-world scenario. The DateTimePicker shows validation feedback using its props: required, valid, and validationMessage.

Customization

• Customize time items via itemTemplate to render each entry as a structured row that displays the formatted 12-hour time, the AM/PM indicator, and an additional computed annotation based on the time's total minute value (e.g., generating 1.5 hrs or 30 mins from hours * 60 + minutes).
• The DateTimePicker also supports customizing the date cells in the calendar popup through the cellTemplate to highlight special dates or events.

Accessibility

The DateTimePicker component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the DateTimePicker component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The DateTimePicker applies ARIA attributes to communicate state and structure:

Keyboard interaction

Before opening the popup, use the below list of keys to DateTimePicker control the popup element.

Use the below list of keys to interact with the Calendar after the DatePicker popup has opened.

Use the below list of keys to interact with the TimePicker after the popup has opened.