DateRangePicker

A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.

Date range

mmddyyyy

label

granularity

isDisabled

Example

DateRangePicker.tsx

DateRangePicker.css

Example

DateRangePicker.tsx

DateRangePicker.css

import {DateRangePicker} from './DateRangePicker';

<DateRangePicker label="Date range" />

Value

Use the value or defaultValue prop to set the selected date range, using objects in the @internationalized/date package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.

232025

2122025

Selected range: February 3 – 12, 2025

import {parseDate, getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from 'react-aria';
import {DateRangePicker} from './DateRangePicker';
import {useState} from 'react';

function Example() {
  let [range, setRange] = useState({
    start: parseDate('2025-02-03'),
    end: parseDate('2025-02-12')
  });
  let formatter = useDateFormatter({ dateStyle: 'long' });
  
  return (
    <>
      <DateRangePicker
        value={range}
        onChange={setRange} />
      <p>Selected range: {formatter.formatRange(
        range.start.toDate(getLocalTimeZone()),
        range.end.toDate(getLocalTimeZone())
      )}</p>
    </>
  );
}

Format options

The date format is automatically determined based on the user's locale. DateRangePicker supports several props to control how values are displayed.

Date

232025845AMPST

2142025845AMPST

granularity

hourCycle

hideTimeZone

shouldForceLeadingZeros

import {parseZonedDateTime} from '@internationalized/date';
import {DateRangePicker} from './DateRangePicker';

<DateRangePicker
  label="Date"
  defaultValue={{
    start: parseZonedDateTime('2025-02-03T08:45:00[America/Los_Angeles]'),
    end: parseZonedDateTime('2025-02-14T08:45:00[America/Los_Angeles]')
  }} />

International calendars

By default, DateRangePicker displays the value using the calendar system for the user's locale. Use <I18nProvider> to override the calendar system by setting the Unicode calendar locale extension. The onChange event always receives a date in the same calendar as the value or defaultValue (Gregorian if no value is provided), regardless of the displayed locale.

14111946शक

25111946शक

Locale

Calendar

import {I18nProvider} from 'react-aria-components';
import {parseDate} from '@internationalized/date';
import {DateRangePicker} from './DateRangePicker';

<I18nProvider locale="hi-IN-u-ca-indian">
  <DateRangePicker
    defaultValue={{
      start: parseDate('2025-02-03'),
      end: parseDate('2025-02-14')
    }} />
</I18nProvider>

Forms

Use the name prop to submit the selected date to the server as an ISO 8601 string. Set the isRequired, minValue, or maxValue props to validate the value, or implement custom client or server-side validation. The isDateUnavailable callback prevents certain dates from being selected. Use allowsNonContiguousRanges to allow selecting ranges containing unavailable dates. See the Forms guide to learn more.

allowsNonContiguousRanges

import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
import {useLocale} from 'react-aria';
import {DateRangePicker} from './DateRangePicker';
import {Button} from './Button';
import {Form} from 'react-aria-components';

function Example(props) {
  let {locale} = useLocale();
  let now = today(getLocalTimeZone());
  let disabledRanges = [
    [now, now.add({ days: 5 })],
    [now.add({ days: 14 }), now.add({ days: 16 })],
    [now.add({ days: 23 }), now.add({ days: 24 })]
  ];

  return (
    <Form>
      <DateRangePicker
        {...props}
        label="Trip dates"
        startName="startDate"
        endName="endDate"
        isRequired
        minValue={today(getLocalTimeZone())}
        isDateUnavailable={date => (
          isWeekend(date, locale) ||
          disabledRanges.some((interval) =>
            date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
          )
        )}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

DateRangePicker

Value

Format options

International calendars

Forms

API