DatePicker
Calendar popup date picker with locale support
May 2026
Accessibility
- Pair the control with a visible label or aria-label and keep helper or error text programmatically associated.
- Provide native name, autocomplete, and value wiring when the component participates in form submission.
- Keep the opening control labeled, ensure focus moves predictably on open and close, and expose the popup type truthfully.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { DatePicker } from '@dryui/ui';
</script>
<DatePicker.Root bind:value={departureDate} name="departureDate">
<DatePicker.Trigger placeholder="Select departure date" />
<DatePicker.Content>
<DatePicker.Calendar />
</DatePicker.Content>
</DatePicker.Root>Import options
Root package
ts
import { DatePicker } from '@dryui/ui'Per-component subpath
ts
import { DatePicker } from '@dryui/ui/date-picker'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
DatePicker.Root | |||||
| open | boolean | Whether the overlay or disclosure is currently open. | — | — | ✓ |
| value | Date | null | Current controlled or bindable value. | — | — | ✓ |
| name | string Adds a hidden input so the selected date participates in native form submission as YYYY-MM-DD. | Field name used during native form submission. | — | — | — |
| locale | string | — | — | — | — |
| min | Date | null | Minimum allowed value. | — | — | — |
| max | Date | null | Maximum allowed value. | — | — | — |
| disabled | boolean | Prevents interaction and applies disabled styling. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
DatePicker.Trigger | |||||
| size | smmdlg | Size preset affecting density, spacing, or typography. | — | — | — |
| placeholder | string | Hint text shown when no value is selected or entered. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |
DatePicker.Content | |||||
| placement | toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end | — | — | — | — |
| offset | number | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
DatePicker.Calendar | |||||
| events | readonly CalendarEventItem[] | — | — | — | — |
| eventDisplay | CalendarEventDisplay | — | — | — | — |
| maxEventLanes | number | — | — | — | — |
| visibleMonths | CalendarVisibleMonths | — | — | — | — |
| eventContent | Snippet<[CalendarEventRenderContext]> | — | — | — | — |