Skip to main content

Date Range Picker

Choose a date range from a visual calendar.

http://localhost:3000
<DateRangePicker aria-label="date range picker" />

Examples​

Label​

Attach a label to the DateRangePicker using the label prop.

http://localhost:3000
<DateRangePicker label="Estimated Delivery Date" />

HelperText​

Add additional context as well as display error messages with the helperText prop.

http://localhost:3000
<DateRangePicker label="Estimated Delivery Date" helperText="Please select a delivery date." />

Small​

A small DateRangePicker is used when vertical spacing is limited.

http://localhost:3000
<DateRangePicker aria-label="delivery date" size="small" />

Start Icon​

Include an icon before the input text.

http://localhost:3000
<DateRangePicker aria-label="delivery date" startIcon={<Icon icon="search" />} />

Relative Ranges​

Set the showRanges prop to display a pre-set list of relative date ranges.

http://localhost:3000
<DateRangePicker aria-label="delivery date" showRanges />

Custom Ranges​

Provide custom relative ranges using the ranges prop and @internationalized/date date objects.

import { CalendarDate, DateValue, endOfMonth, startOfMonth } from '@internationalized/date';

const calendarDate = createCalendarDate(defaultDate);
const defineds = {
  startOfLastThreeMonths: startOfMonth(addMonths(calendarDate, -3)),
  endOfLastThreeMonths: endOfMonth(addMonths(calendarDate, -1)),
  startOfLastSixMonths: startOfMonth(addMonths(calendarDate, -6)),
  endOfLastSixMonths: endOfMonth(addMonths(calendarDate, -1)),
  startOfLastYear: startOfMonth(addMonths(calendarDate, -13)),
  endOfLastYear: endOfMonth(addMonths(calendarDate, -1)),
  startOfLastTwoYears: startOfMonth(addMonths(calendarDate, -25)),
  endOfLastTwoYears: endOfMonth(addMonths(calendarDate, -1)),
};

const customRanges = [
  {
    key: 'lastThreeMonths',
    label: 'Last three months',
    value: {
      start: defineds.startOfLastThreeMonths,
      end: defineds.endOfLastThreeMonths,
    },
  },
  {
    key: 'lastSixMonths',
    label: 'Last six months',
    value: {
      start: defineds.startOfLastSixMonths,
      end: defineds.endOfLastSixMonths,
    },
  },
  {
    key: 'lastYear',
    label: 'Last Year',
    value: {
      start: defineds.startOfLastYear,
      end: defineds.endOfLastYear,
    },
  },
  {
    key: 'lastTwoYears',
    label: 'Last Two Years',
    value: {
      start: defineds.startOfLastTwoYears,
      end: defineds.endOfLastTwoYears,
    },
  },
];

<DateRangePicker showRanges ranges={customRanges} />;

Controlled​

A DateRangePicker's state can be controlled by a parent React component by setting the value prop and passing a handler to the onChange prop.

info

Date values are provided using objects in the @internationalized/date package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.

http://localhost:3000
function ControlledExample() {
  const [value, setValue] = React.useState({
    start: new CalendarDate(2022, 7, 2),
    end: new CalendarDate(2022, 7, 12),
  });

  return <DateRangePicker aria-label="delivery date" onChange={setValue} value={value} />;
}

Unavailable Dates​

Set the isDateUnavailable handler prop to make certain dates unavailable for selection.

http://localhost:3000
function UnavailableExample() {
  const { locale } = useLocale();
  const isDateUnavailable = (date) => isWeekend(date, locale);

  return <DateRangePicker aria-label="delivery date" isDateUnavailable={isDateUnavailable} />;
}

Disabled State​

Set the isDisabled prop to prevent a user from interacting with the DateRangePicker.

http://localhost:3000
<DateRangePicker aria-label="delivery date" isDisabled />

Invalid State​

Set the validationState prop to invalid to render the DateRangePicker in an invalid state.

http://localhost:3000
<DateRangePicker
  aria-label="delivery date"
  helperText="A selection is required"
  validationState="invalid"
/>

Props​

as?The root element to be rendered