Mushilu-San UI Date picker
A button that opens a calendar panel to choose a single date.
Selector: mui-date-picker
import { DatePicker } from '@mushilu-san/ui/forms';Loading example…
Overview
role="dialog". The value model is two-way bindable, and minDate and maxDate limit the choice.
aria-expanded and aria-haspopup="dialog". Escape closes the panel and returns focus to the trigger.
When to use
Choosing one date in a form where the calendar context helps. Setting a date field with a limited range, such as a booking date.
Guidelines
Do
Format the shown date for the user locale with locale.Give the field a label so the purpose is clear.
Don't
Do not open the calendar automatically on page load.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
trigger | button (with aria-haspopup="dialog") | aria-expanded follows the panel state. |
panel | dialog | aria-modal="true". |
Keyboard
| Keys | Action |
|---|---|
| EnterSpace | |
| Escape | |
| Arrow keys, PageUpPageDown, HomeEnd |
Label the trigger with the field name, for example "Start date: 12 March 2027".
API
DatePicker
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | 'Pick a date' | Text shown in the trigger when no date is chosen. Default `Pick a date`. |
minDate | Date | null | null | Earliest selectable date. Days before it are disabled. |
maxDate | Date | null | null | Latest selectable date. Days after it are disabled. |
locale | string | 'en-US' | BCP 47 locale used to format the date and calendar names. Default `en-US`. |
disabled | boolean | false | Disables the trigger and the calendar. Accepts attribute presence, e.g. <… disabled>. |
| Name | Type | Default | Description |
|---|---|---|---|
value | Date | null | null | Selected date, or `null` when none is chosen. Two-way bindable with `[(value)]`. |
CSS parts
::part(panel)::part(root)::part(trigger)
Tokens
--mui-color-surface--mui-color-border--mui-shadow-3--mui-color-focus-ring