React DateRangePicker

The DateRangePicker component allows selection of a start and end date as a continuous range. It supports form use cases with controlled and uncontrolled modes, validation constraints (e.g., minDate, maxDate, minRangeDays, maxRangeDays), presets, and popup or inline display options for flexible UX.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, the React DateRangePicker component to the project.

Installing Syncfusion® React packages

To use the DateRangePicker component, install the @syncfusion/react-calendars package:

npm install @syncfusion/react-calendars

Adding CSS reference

Import the DateRangePicker component’s required CSS references as follows in src/App.css.

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

Adding DateRangePicker component

To include the DateRangePicker component in an application, import the DateRangePicker from the @syncfusion/react-buttons package in App.tsx.

import { DateRangePicker } from "@syncfusion/react-calendars";

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates how to render a basic DateRangePicker component. By setting the defaultValue property with a start and end date, the DateRangePicker initializes with a predefined range of dates.

Controlled Vs Uncontrolled

The DateRangePicker supports both controlled and uncontrolled modes. In controlled mode, the parent component manages the value and supplies it through the value prop while defaultValue provides the initial range for uncontrolled usage.

Range restriction

The DateRangePicker component supports range‑selection control through the minRange, maxRange properties. These properties define the minimum and maximum allowable number of days in a selected date range, and the DateRangePicker automatically enforces these constraints by adjusting or restricting the selectable end date when a start date is chosen.

Dialog mode

The DateRangePicker component supports dialog-style rendering through the pickerVariant property. Setting pickerVariant to Popup enables the DateRangePicker to open in a modal-like popup, simulating a dialog experience.

Presets

The DateRangePicker component supports predefined preset ranges that enable quick selection of commonly used date intervals commonly used date intervals with a single click. These presets provide a convenient way to choose frequently selected ranges without manually navigating the calendar. A Custom Range option is also included in the list, enabling users to open the calendar interface and define a date range based on their specific requirements.

Separator

The separator property defines the string used to separate the start date and end date in the formatted date range text. This value determines how the combined date range is displayed in the input field. By default, the separator is set to '-'.

Date constraints

The minDate and maxDate properties define the allowable date range that can be selected within the DateRangePicker. These properties set the earliest and latest dates that can be selected. Any dates that fall outside this defined range are visually marked as unavailable and cannot be selected or set within the component.

Appearance

Variants

The DateRangePicker component supports three visual variants: Standard, Outlined and Filled each providing a distinct appearance..

Float label

The DateRangePicker 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.

Non-Editable

The DateRangePicker component provides the editable property, which controls whether users can manually type a date into the input field. When set to false, the input becomes read-only, and dates can only be selected using the calendar popup. This ensures consistent date formatting in DateRangePicker component.

Disabled

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

Forms support

The DateRangePicker allows users to pick check-in and check-out dates together, making it perfect for room-booking workflows. It supports validation rules like preventing past dates, limiting stay duration, and enforcing booking windows before submitting the reservation.

Accessibility

The DateRangePicker 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 details for the DateRangePicker component are 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 DateRangePicker component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the DateRangePicker component:

Keyboard interaction

The DateRangePicker component follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported: