DatePicker
Date picker popover built on Calendar. Supports single date and date range selection.
Live Demo
Single Date
Date Range
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | undefined | — | Selected date |
onChange | (date: Date | undefined) => void | — | Callback when date changes |
placeholder | string | 'Pick a date' | Placeholder text when no date selected |
dateFormat | string | 'PPP' | date-fns format string (default: PPP) |
disabled | boolean | false | Disables the picker |
disabledDates | Matcher | — | Disabled dates passed to Calendar |
fromDate | Date | — | Minimum selectable date |
toDate | Date | — | Maximum selectable date |
Usage
import { DatePicker, DateRangePicker } from '@ghiberti85/ui'
// Single date
const [date, setDate] = useState<Date | undefined>()
<DatePicker
value={date}
onChange={setDate}
placeholder="Pick a date"
dateFormat="dd/MM/yyyy"
/>
// Date range
const [range, setRange] = useState<{ from?: Date; to?: Date }>()
<DateRangePicker
value={range}
onChange={setRange}
placeholder="Pick a date range"
/>
// With constraints
<DatePicker
value={date}
onChange={setDate}
fromDate={new Date()}
disabledDates={{ dayOfWeek: [0, 6] }}
/>