DatePicker

A date field with a keyboard-driven calendar.

Report from

Launch date

Pick a date in the next two months.

date-picker.example.svelte

<script lang="ts">
  import { DatePicker } from '@onlywin/ui-svelte';

  let from = $state<string | null>('2026-11-12');
</script>

<div class="example-grid">
  <DatePicker
    label="Report from"
    bind:value={from}
    today="2026-11-12"
    max="2026-12-31"
  />
  <DatePicker
    label="Launch date"
    today="2026-11-12"
    hint="Pick a date in the next two months."
    min="2026-11-12"
    max="2027-01-12"
  />
</div>

Usage

Do

Set min and max when only some dates make sense.

Don’t

Do not use it for dates far in the past, like a birth date; use Input.

Accessibility

The field opens a non-modal dialog with a grid; every day has its full date as its name.
Today is aria-current="date"; the chosen day is aria-selected. Focus returns to the field on close.
Weeks start on the locale’s first day; month and day names follow the language.

Keyboard

DatePicker keyboard interactions
Keys	Action
`Arrow Left, Arrow Right`	Next or previous day
`Arrow Down, Arrow Up`	Same day next or previous week
`Home, End`	Start or end of the week
`Page Down, Page Up`	Next or previous month (year with Shift)
`Enter, Space`	Choose
`Escape`	Close

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

DatePicker props
Prop	Type	Default	Description
`disabled`	`boolean`	`false`
`error`	`string`	—
`hint`	`string`	—
`label` *required	`string`	—
`max`	`string`	—	Latest date that can be chosen (`YYYY-MM-DD`).
`min`	`string`	—	Earliest date that can be chosen (`YYYY-MM-DD`).
`name`	`string`	—
`onValueChange`	`(value: string \| null) => void`	—
`optional`	`boolean`	`false`
`placeholder`	`string`	—
`today`	`string`	`formatUiIsoDate(uiDateFromUtc(Date.now()))`	Today as `YYYY-MM-DD`; default today in UTC.
`value`	`string \| null`	`null`	Bindable in Svelte; `defaultValue` in React.