Disabled Dates

Pass a function to isDateDisabled. Return true to disable a date — disabled days are not clickable and not keyboard-focusable.

Weekends

tsx

<TemporalDatePicker
  value={date}
  onChange={setDate}
  isDateDisabled={d => d.dayOfWeek >= 6}
/>

dayOfWeek follows ISO 8601: Monday = 1, Sunday = 7.

Past dates

tsx

import { Temporal } from '@js-temporal/polyfill'

const today = Temporal.Now.plainDateISO()

<TemporalDatePicker
  value={date}
  onChange={setDate}
  isDateDisabled={d => Temporal.PlainDate.compare(d, today) < 0}
/>

Future dates

tsx

<TemporalDatePicker
  value={date}
  onChange={setDate}
  isDateDisabled={d => Temporal.PlainDate.compare(d, today) > 0}
/>

Specific dates (e.g. bank holidays)

tsx

const HOLIDAYS = new Set(['2026-01-01', '2026-12-25', '2026-12-26'])

<TemporalDatePicker
  value={date}
  onChange={setDate}
  isDateDisabled={d => HOLIDAYS.has(d.toString())}
/>

Temporal.PlainDate.toString() returns the ISO 8601 string YYYY-MM-DD.

Combined rules

tsx

<TemporalDatePicker
  value={date}
  onChange={setDate}
  isDateDisabled={d =>
    d.dayOfWeek >= 6 ||
    Temporal.PlainDate.compare(d, today) < 0
  }
/>

Range mode — blocked crossing

In mode="range", a disabled date also blocks the range from crossing it. The user cannot select a start and end that span across a disabled day.

tsx

<TemporalDatePicker
  mode="range"
  value={range}
  onChange={setRange}
  isDateDisabled={d => d.dayOfWeek >= 6}
/>