Getting Started

temporal-react-datepicker is a React date picker built on the Temporal API. Pick a date, get back an immutable Temporal.PlainDate — no Date objects, no timezone surprises.

RequiresReact 19+@js-temporal/polyfill

Installation

npmpnpmyarnbun

$ npm install temporal-react-datepicker @js-temporal/polyfill

Basic usage

tsx

import { useState } from 'react'
import { Temporal } from '@js-temporal/polyfill'
import { TemporalDatePicker } from 'temporal-react-datepicker'

type DateValue = Temporal.PlainDate | undefined

function App() {
  const [date, setDate] = useState<DateValue>()

  return <TemporalDatePicker value={date} onChange={setDate} />
}

The value prop accepts a Temporal.PlainDate (or undefined when nothing is selected). onChange fires with the newly selected date each time the user picks a day.

Clearable

Pass clearable to show a × button that resets the selection. When cleared, onChange receives undefined.

tsx

<TemporalDatePicker
  clearable
  value={date}
  onChange={setDate}
/>

Next steps

Date RangeSelect a start and end date with a single picker.→Disabled DatesBlock weekends, holidays, or any custom rule.→InternationalizationBCP 47 locale and custom weekday label overrides.→Theming17 CSS custom properties for full visual control.→