DatePicker
A date field: a trigger showing the chosen date, and a calendar to pick one from.
Anchored under the trigger on a wide screen; on a phone it comes up from the bottom as a modal sheet with 44px days and a horizontal swipe between months — the same split Dialog makes. The value is a plain YYYY-MM-DD string, never a Date: it is what <input type="date"> submits, it compares correctly as text (so min and max are string comparisons), and it has no time zone to shift a day by. Getting far away is three taps, not forty: the month caption opens a list of years, a year opens its twelve months, a month opens its days. The keyboard follows the APG date picker grid — arrows by day and week, PageUp/PageDown by month, with Shift by year — and T jumps to today.
<DatePicker bind:value={due} min="2026-01-01" aria-label="Due date" />
Forms · two-way: bind:value · submits in a form with name · portalled to <body> · keyboard contract
<script lang="ts">
import { DatePicker } from '@l4st/driftwood';
</script>
| Light | Dark |
|---|---|
 |
 |
 |
 |
 |
 |
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
value bind: |
string |
— | The chosen date as YYYY-MM-DD, or undefined for none. |
min |
string |
— | Earliest selectable date, YYYY-MM-DD. Inclusive. |
max |
string |
— | Latest selectable date, YYYY-MM-DD. Inclusive. |
isDateDisabled |
(date: string) => boolean |
— | Rules out single days — weekends, holidays, booked dates. Gets YYYY-MM-DD. |
placeholder |
string |
'Pick a date' |
Trigger text when no date is chosen. |
locale |
string |
— | BCP 47 tag for month and day names and the trigger format. Defaults to the browser's. |
weekStartsOn |
0 | 1 | 2 | 3 | 4 | 5 | 6 |
— | First column of the grid, 0 = Sunday. Defaults to what the locale uses. |
clearable |
boolean |
false |
Adds a button that empties the value. |
disabled |
boolean |
false |
Blocks opening. |
class |
string |
— | Merged with the component's own classes, last — so yours win. |
id |
string |
— | Points a <Label for=…> at the trigger. |
name |
string |
— | Submits the value, as YYYY-MM-DD, with the form. |
aria-label |
string |
— | Accessible name, when no visible <Label for=…> points at this. |
aria-labelledby |
string |
— | Id of the element that names this, instead of aria-label. |
aria-describedby |
string |
— | Extra description ids; the chosen date is appended to them. |
dialogLabel |
string |
'Choose a date' |
Names the calendar panel for assistive tech. |
todayLabel |
string |
'Today' |
Footer button that picks today. |
clearLabel |
string |
'Clear' |
Footer button that empties the value; shown when clearable. |
previousMonthLabel |
string |
'Previous month' |
Accessible name of the previous-month arrow. |
nextMonthLabel |
string |
'Next month' |
Accessible name of the next-month arrow. |
onValueChange |
(value: string | undefined) => void |
— | Fires with the picked date, or undefined when cleared. |
Everything not listed above is spread onto the underlying element (HTMLButtonAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.
Keyboard
| Key | Does |
|---|---|
| Enter / Space / ↓ | open the calendar on the chosen day, or today |
| ← / → | previous / next day |
| ↑ / ↓ | same day a week earlier / later |
| Home / End | first / last day of the week |
| PageUp / PageDown | previous / next month; with Shift, year |
| T | jump to today |
| Enter / Space | pick the focused day and close |
| Escape | from the year or month list, back to the days; otherwise close |
| Tab | move between header, days and footer; leaving the panel closes it |
Example
The markup behind the screenshot above, lifted from src/routes/shots/ — so it
compiles, and it is exactly what produced the image.
<DatePicker value="2026-10-14" aria-label="Next full backup" />
Forms · Field · Input · FileInput · FileList · Textarea · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · TagsInput · Checkbox · Switch · Slider