Date picker
stable 6.1 kB<hk-date-picker>A calendar that gets the boring parts right: correct leading blanks per month, a configurable first day of the week, and range selection that survives picking the end before the start. `mode` changes what a click means — one day, several, or a span — while the grid, the keyboard map and the month arithmetic stay identical. Time folds into every selected date rather than sitting beside it, so a timestamp is a real instant and not a date at midnight.
#calendar#date
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | Date | null | null | Selected date, or range start. Two-way bindable. |
| rangeEnd | Date | null | null | Range end. Two-way bindable, and only used in range mode. |
| mode | 'single' | 'multiple' | 'range' | 'single' | What a click means. The grid, the keyboard map and the month arithmetic are identical in all three. |
| showTime | boolean | false | Adds hour and minute controls, folded into every selected date — so a timestamp is a real instant, not a date at midnight. |
| hourFormat | '12' | '24' | '24' | Clock used by the time controls. |
| format | 'dd/MM/yyyy' | 'yyyy-MM-dd' | 'iso' | 'timestamp' | string | 'dd/MM/yyyy' | Shape of the emitted value. A custom pattern is accepted; `timestamp` emits epoch milliseconds and `iso` emits ISO 8601. |
| min / max | Date | null | null | Selectable bounds; outside days are disabled, not hidden. |
| firstDay | 'sunday' | 'monday' | 'monday' | Which column the week starts in. |
| locale | string | 'en-US' | Drives month and weekday names. |
Outputs
valueChange / rangeEndChangeEventEmitter<Date | null>Emits on pick.
Keyboard
- ← / → Previous / next day
- ↑ / ↓ Same weekday, previous / next week
- Page Up / Page Down Previous / next month
- Enter Selects the focused day
- Escape Closes without selecting
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-date-selected | #dc2626 | Selected day fill. |
| --hk-date-in-range | rgb(220 38 38 / 0.10) | Days between the two ends. |
| --hk-date-today-ring | #94a3b8 | Outline on today. |
Accessibility
- The grid is a real table with column headers, so a screen reader can say "Tuesday 14".
- Date-only values are anchored to local midnight — the same fix the table filter needed, since a UTC-parsed date lands on the previous day west of UTC.
- Disabled days are announced as disabled rather than silently ignoring the click.