# Date picker

A date field with its calendar card in a slot underneath: type a date in any common form for your locale, or press the key and the card slides out. Single dates and ranges; shown the Intl way, posted as ISO.

Kit part · With the Kit · https://tactileui.dev/parts/date-picker

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Reading a typed date asks Intl for the locale’s order of day, month and year and for its month names (long and short, accents folded, English as a fallback), then checks the date is real.

## Variants

- Single date
- Range · stays and holds
- Locale · de-DE
- Locale · en-US

## States

- Rest
- Focus
- Card out
- Error

## Props and options

| Name | Kind | Description |
| - | - | - |
| label | attribute | The printed label over the well; it names the field. |
| name | attribute | Adds a hidden input that posts the value as ISO. |
| value | attribute · property | The committed date. Shown in the field the locale’s way. |
| mode | attribute | Two dates. The card asks for the first day, then the last. |
| locale | attribute | How dates are shown and read, and the week’s first day in the card. |
| min · max | attribute | Passed to the calendar; typed dates outside get a hint naming the bounds. |
| disabled-weekdays · disabled-dates | attribute | Closed days, in the card and when typed. |
| hint | attribute | The hint under the well when all is well. |
| required | attribute | Marks the visible input required. |
| show() · close() | method | Slide the card out, or back into its slot. |
| change | event | A date, or a whole range, was committed: typed or picked. |
| Enter | keyboard | Read what was typed. |
| Alt+Down | keyboard | Open the card (plain Down works in an empty field). |
| Escape | keyboard | Close it and return to the calendar key. |
| Calendar keys | keyboard | Everything the calendar takes: arrows, Home/End, PageUp/PageDown, Enter. |

## Usage notes

Escape puts the card back.

## Accessibility

- Opening moves the focus to the chosen day (or today) in the grid; picking returns it to the field, Escape to the key.
- In range mode a polite line in the card says what to pick next: the first day, then the last.

## Related parts

- [Calendar](https://tactileui.dev/parts/calendar): A month on a plate. The month and year sit on two drums behind a window and roll when you page; the chosen day is a latched cap, a range is a groove cut between two caps, and events are lamps named in the line below.
- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Combo](https://tactileui.dev/parts/combo): One field with its one action in a shared well: subscribe, search, add.