A digital services project by FlexionDate Range Picker
formUSWDS-derivedinteractive
Paired start and end date pickers that coordinate date constraints.
Reference: USWDS documentation ↗
Variants
Date Range Picker With Constraints
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
<flex-date-range-picker>
<div class="flex-date-range-picker__range-start">
<flex-date-picker data-min-date="2024-01-01" data-max-date="2030-12-31">
<label class="flex-label" for="trip-start">Trip start</label>
<div class="flex-date-picker__wrapper">
<input class="flex-input flex-date-picker__external-input" id="trip-start" name="trip-start" type="text" placeholder="mm/dd/yyyy" value=""/>
<button type="button" class="flex-date-picker__button" aria-label="Toggle calendar">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#event">
</use>
</svg>
</button>
<div class="flex-date-picker__calendar" hidden="" role="application" aria-label="Calendar">
<div class="flex-date-picker__calendar-header">
<button type="button" class="flex-date-picker__nav flex-date-picker__nav--prev" aria-label="Previous month">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_before">
</use>
</svg>
</button>
<button type="button" class="flex-date-picker__month-label" aria-label="Select month">
</button>
<button type="button" class="flex-date-picker__nav flex-date-picker__nav--next" aria-label="Next month">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_next">
</use>
</svg>
</button>
</div>
<table class="flex-date-picker__table" role="presentation">
<thead>
<tr>
<th abbr="Sunday">Su</th>
<th abbr="Monday">Mo</th>
<th abbr="Tuesday">Tu</th>
<th abbr="Wednesday">We</th>
<th abbr="Thursday">Th</th>
<th abbr="Friday">Fr</th>
<th abbr="Saturday">Sa</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</flex-date-picker>
</div>
<div class="flex-date-range-picker__range-end">
<flex-date-picker data-min-date="2024-01-01" data-max-date="2030-12-31">
<label class="flex-label" for="trip-end">Trip end</label>
<div class="flex-date-picker__wrapper">
<input class="flex-input flex-date-picker__external-input" id="trip-end" name="trip-end" type="text" placeholder="mm/dd/yyyy" value=""/>
<button type="button" class="flex-date-picker__button" aria-label="Toggle calendar">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#event">
</use>
</svg>
</button>
<div class="flex-date-picker__calendar" hidden="" role="application" aria-label="Calendar">
<div class="flex-date-picker__calendar-header">
<button type="button" class="flex-date-picker__nav flex-date-picker__nav--prev" aria-label="Previous month">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_before">
</use>
</svg>
</button>
<button type="button" class="flex-date-picker__month-label" aria-label="Select month">
</button>
<button type="button" class="flex-date-picker__nav flex-date-picker__nav--next" aria-label="Next month">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_next">
</use>
</svg>
</button>
</div>
<table class="flex-date-picker__table" role="presentation">
<thead>
<tr>
<th abbr="Sunday">Su</th>
<th abbr="Monday">Mo</th>
<th abbr="Tuesday">Tu</th>
<th abbr="Wednesday">We</th>
<th abbr="Thursday">Th</th>
<th abbr="Friday">Fr</th>
<th abbr="Saturday">Sa</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</flex-date-picker>
</div>
</flex-date-range-picker>Default Date Range Picker
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|
<flex-date-range-picker>
<div class="flex-date-range-picker__range-start">
<flex-date-picker>
<label class="flex-label" for="start-date">Start date</label>
<div class="flex-date-picker__wrapper">
<input class="flex-input flex-date-picker__external-input" id="start-date" name="start-date" type="text" placeholder="mm/dd/yyyy" value=""/>
<button type="button" class="flex-date-picker__button" aria-label="Toggle calendar">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#event">
</use>
</svg>
</button>
<div class="flex-date-picker__calendar" hidden="" role="application" aria-label="Calendar">
<div class="flex-date-picker__calendar-header">
<button type="button" class="flex-date-picker__nav flex-date-picker__nav--prev" aria-label="Previous month">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_before">
</use>
</svg>
</button>
<button type="button" class="flex-date-picker__month-label" aria-label="Select month">
</button>
<button type="button" class="flex-date-picker__nav flex-date-picker__nav--next" aria-label="Next month">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_next">
</use>
</svg>
</button>
</div>
<table class="flex-date-picker__table" role="presentation">
<thead>
<tr>
<th abbr="Sunday">Su</th>
<th abbr="Monday">Mo</th>
<th abbr="Tuesday">Tu</th>
<th abbr="Wednesday">We</th>
<th abbr="Thursday">Th</th>
<th abbr="Friday">Fr</th>
<th abbr="Saturday">Sa</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</flex-date-picker>
</div>
<div class="flex-date-range-picker__range-end">
<flex-date-picker>
<label class="flex-label" for="end-date">End date</label>
<div class="flex-date-picker__wrapper">
<input class="flex-input flex-date-picker__external-input" id="end-date" name="end-date" type="text" placeholder="mm/dd/yyyy" value=""/>
<button type="button" class="flex-date-picker__button" aria-label="Toggle calendar">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#event">
</use>
</svg>
</button>
<div class="flex-date-picker__calendar" hidden="" role="application" aria-label="Calendar">
<div class="flex-date-picker__calendar-header">
<button type="button" class="flex-date-picker__nav flex-date-picker__nav--prev" aria-label="Previous month">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_before">
</use>
</svg>
</button>
<button type="button" class="flex-date-picker__month-label" aria-label="Select month">
</button>
<button type="button" class="flex-date-picker__nav flex-date-picker__nav--next" aria-label="Next month">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#navigate_next">
</use>
</svg>
</button>
</div>
<table class="flex-date-picker__table" role="presentation">
<thead>
<tr>
<th abbr="Sunday">Su</th>
<th abbr="Monday">Mo</th>
<th abbr="Tuesday">Tu</th>
<th abbr="Wednesday">We</th>
<th abbr="Thursday">Th</th>
<th abbr="Friday">Fr</th>
<th abbr="Saturday">Sa</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</flex-date-picker>
</div>
</flex-date-range-picker>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-date-range-picker | <flex-date-range-picker> (custom element) | Container element |
usa-date-range-picker__range-start | .flex-date-range-picker__range-start | Start date picker container |
usa-date-range-picker__range-end | .flex-date-range-picker__range-end | End date picker container |
Verified properties
displayBehavior promises
- ✓ Contains two date picker instances (start and end)
- ✓ Selecting start date updates end picker min-date constraint
- ✓ Selecting end date updates start picker max-date constraint
- ✓ Accessibility audit passes
Source CSS
/* flex-date-range-picker -- USWDS Date Range Picker conformance
Extends: flex-date-picker
Features: paired start/end date pickers with coordinated constraints */
flex-date-range-picker {
display: block;
max-inline-size: calc(var(--flex-control-max-width) * 2 + 2rem);
}
.flex-date-range-picker__range-start,
.flex-date-range-picker__range-end {
margin-block-end: 1.5rem;
}
@media (min-width: 37.5rem) {
flex-date-range-picker {
display: flex;
gap: 2rem;
align-items: flex-start;
}
.flex-date-range-picker__range-start,
.flex-date-range-picker__range-end {
flex: 1;
margin-block-end: 0;
}
}