Open experiment
Smart date range field
Two coordinated native date inputs calculate a readable night count and validate chronological order. A compact route line ties start to end visually while errors and duration remain available in a polite text status.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-date-range">
<div class="cmp-date-range__fields">
<label><span>Check in</span><input type="date" value="2026-08-12" data-date="start" /></label>
<i aria-hidden="true"><b></b></i>
<label><span>Check out</span><input type="date" value="2026-08-16" data-date="end" /></label>
</div>
<p class="cmp-date-range__status" aria-live="polite">4 nights · a long weekend escape</p>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Each native date input has a visible label.
- Errors and calculated duration are announced as text.
- Chronological constraints update without replacing native date semantics.
License: MIT License for open-source use, modification, and distribution.