Date Picker
A composable date picker combining Calendar with a Popover trigger. Supports single dates, date ranges, and disabled states.
When To Use
- Use Date Picker when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Props
value, onChange, placeholder, disabled, className
Key exports
DatePicker, formatDate
Example Code
import { DatePicker } from "@hilum/ui"
const [date, setDate] = React.useState<Date | undefined>()
<DatePicker value={date} onChange={setDate} />Date Picker · Single
Single date picker
Click the button to open a calendar popover and select a date.
Selected: None
Date Picker · Range
Date range picker
Two date pickers side by side for selecting a start and end date.
From
—To
From: — · To: —
Date Picker · Disabled
Disabled state
Set disabled={true} to prevent interaction entirely.
This field is currently unavailable.