Ready for Dev, so its markup, attributes, events and styles can all still change without notice,
it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work
can be seen and reviewed - nothing more.
DateRange
An inline two-date range calendar built on the native <section>:
<section is="root-date-range">.
Usage
<section is="root-date-range" locale="en-GB"></section>
Pre-selected, bounded, and form-submittable:
<section
is="root-date-range"
name="stay"
value="2026-08-10/2026-08-14"
min="2026-08-01"
max="2026-08-31"
></section>
The first click sets the start date, the second sets the end (picks are re-ordered so the start is never
after the end); a third click starts a fresh range. Days between the two endpoints get
data-in-range, so the band reads as one continuous strip. The grid is fully
keyboard-navigable (arrow keys, Home/
End, PageUp/PageDown, and Shift+PageUp/Shift+PageDown
for the year), with a single roving tabstop and a polite live region announcing the selection.
When name is present, two hidden inputs (<name>-start
and <name>-end) are maintained so the value participates in native form submission.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value |
string |
- | Initial range as start/end (both YYYY-MM-DD) |
min |
string |
- | Earliest selectable date (YYYY-MM-DD) |
max |
string |
- | Latest selectable date (YYYY-MM-DD) |
locale |
string |
navigator.language |
BCP-47 locale for month/weekday names |
name |
string |
- | Emit <name>-start/<name>-end hidden inputs |
Properties
| Property | Type | Description |
|---|---|---|
start |
string (read-only) |
Start date as ISO, or '' |
end |
string (read-only) |
End date as ISO, or '' |
value |
string |
The start/end range, or '' while incomplete |
Methods
| Method | Description |
|---|---|
selectDate(date) |
Extend or restart the range with a Date |
clear() |
Clear the selection |
prevMonth() / nextMonth() |
Move the visible month |
Events
| Event | Detail | Description |
|---|---|---|
root-date-range.change |
{ start, end } |
Fired when the selection changes (end may be '') |
Extends
HTMLElement - use with <section is="root-date-range">.