Date Range

Pass mode="range" to switch the picker into range selection mode. The user clicks once to set the start date and again to set the end date.

tsx

import { useState } from 'react'
import type { DateRange } from 'temporal-react-datepicker'
import { TemporalDatePicker } from 'temporal-react-datepicker'

function App() {
  const [range, setRange] = useState<DateRange | undefined>(undefined)

  return (
    <TemporalDatePicker
      mode="range"
      value={range}
      onChange={setRange}
    />
  )
}

The DateRange type

ts

type DateRange = {
  start: Temporal.PlainDate
  end: Temporal.PlainDate | null
}

After the first click, onChange fires with end: null — the range is open. After the second click, both start and end are set.

Clearable range

Add clearable to show a × button. When clearable, onChange is widened to (range: DateRange | undefined) => void:

tsx

<TemporalDatePicker
  mode="range"
  clearable
  value={range}
  onChange={setRange}
/>

Navigating months and years

Click the month name or year in the calendar header to jump directly to a month or year selector panel. Press Escape to return to the calendar without making a selection.

This works in both single and range mode.