Composite
Date Picker Requires JS
Input + calendar popover. Type the date manually or pick from the calendar — both stay in sync. Format-aware, with min / max constraints and disabled-date support.
About
Overview
The bread-and-butter date control: a text input the user can type into, plus a calendar that opens on focus or click. Combines Form Field with Calendar.
Live
Demo
<ren-date-picker name="birthday" value="1990-04-12">
<label slot="label">Birthday</label>
</ren-date-picker>Reference
API
Inherits all Calendar attributes. Plus:
| Attribute | Type | Default | Notes |
|---|---|---|---|
format | string | locale-default | Display format ("MM/DD/YYYY", "DD-MM-YYYY"…). Submitted value is always ISO 8601. |
placeholder | string | "YYYY-MM-DD" | Input placeholder. |
placement | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side for the calendar popover. Reflected to data-side. |
Inclusive by default
Accessibility
- The text input accepts free typing — assistive tech users don't need to navigate the calendar grid.
- The calendar trigger button has
aria-label="Open calendar"andaria-haspopup="dialog".