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.
The library exports two components:
| Component | Use when… |
|---|---|
TemporalDatePicker | You need a standalone calendar (embedded in a page, sidebar, or popover you control). |
DatePickerInput | You need a form field — a segmented input that opens a calendar popover. |
RequiresReact 19+
@js-temporal/polyfillInstallation
Section titled “Installation”$ npm install temporal-react-datepicker @js-temporal/polyfill
Basic usage
Section titled “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
Section titled “Clearable”Pass clearable to show a × button that resets the selection.
When cleared, onChange receives undefined.
tsx
<TemporalDatePicker
clearable
value={date}
onChange={setDate}
/>DatePickerInput
Section titled “DatePickerInput”For a form-field experience — a locale-aware segmented input that opens a popover calendar:
tsx
import { useState } from 'react'
import { Temporal } from '@js-temporal/polyfill'
import { DatePickerInput } from 'temporal-react-datepicker'
function App() {
const [date, setDate] = useState<Temporal.PlainDate | undefined>(undefined)
return <DatePickerInput clearable value={date} onChange={setDate} />
}The segment order adapts to the user’s locale automatically (es-ES → dd/mm/aaaa, en-US → mm/dd/yyyy). See the DatePickerInput guide for all options.