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.
Kit parts
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.
Seats open in 11 days. Want one email that morning?
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.
