Component
Date Picker
A date picker with calendar dropdown and optional time selection. Uses the headless @refraction-ui/date-picker core.
Examples
Click to open the calendar and select a date.
Calendar + Time
Installation
$
pnpm add @refraction-ui/reactUsage
tsx
import { DatePicker } from '@refraction-ui/react'
export function MyComponent() {
const [date, setDate] = useState<Date>()
return <DatePicker value={date} onChange={setDate} />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | -- | Selected date/time. |
onChange | (date: Date) => void | -- | Callback when date changes. |
format | string | -- | Display format for the selected-date text shown next to the input (e.g. 'DD/MM/YYYY'). The native input value stays ISO. |
className | string | -- | Additional CSS classes. |