Composite
Date Picker Requires JS
Button trigger + calendar popover. Picking a day updates the trigger label and the hidden input the form submits. Format-aware, with min / max constraints and disabled-date support.
About
Overview
The bread-and-butter date control: a trigger button showing the current date, plus a calendar that opens on click or Enter / Space. The host owns its trigger and popover and mounts a Calendar inside the dropdown — write the empty element and let it build itself.
Live
Demo
<ren-date-picker name="birthday" value="1990-04-12" placeholder="Birthday"></ren-date-picker>
<ren-date-picker name="renewal" placeholder="Renewal date"></ren-date-picker>Two pickers share the demo on purpose: each instance gets its own generated CSS anchor name, so every calendar opens against its own trigger. A single shared anchor-name would resolve to the last trigger in the document and stack both calendars there.
Reference
API
Inherits all Calendar attributes. Plus:
| Attribute | Type | Default | Notes |
|---|---|---|---|
format | "short" | "medium" | "long" | "short" | How the month is rendered in the trigger label, via Intl.DateTimeFormat and the active locale. |
placeholder | string | "Select date" | Trigger label while no date is selected. It is also the trigger's accessible name, so keep it unique per page. |
placement | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side for the calendar popover. Reflected to data-side. |
Inclusive by default
Accessibility
- The trigger is a real
<button type="button">witharia-haspopup="dialog"and anaria-expandedthat flips as the dropdown opens and closes. - Its accessible name is the selected date, or the
placeholderwhile empty — give every picker on a page a distinct placeholder so screen reader users can tell them apart. - Escape closes the dropdown and returns focus to the trigger; opening moves focus to the first selectable day.