DateRangePicker
A button that picks a start and end date from a two-month range Calendar in a popover.
Basic
Two months side by side. The first click starts the range and the second ends it; the popover stays open to adjust.
2026-10-12 to 2026-10-23
Code
<DateRangePicker from={trip.from} to={trip.to} />Usage
import { DateRangePicker } from "@elements/ui/date-range-picker";
<DateRangePicker from={trip.from} to={trip.to} />
<DateRangePicker from={stay.from} to={stay.to} min={today} minNights={2} maxNights={14}
startName="checkin" endName="checkout" required />Examples
Close on select
closeOnSelect closes once both ends are picked and returns focus to the button.
none to none
events: none
Code
<DateRangePicker from={r.from} to={r.to} closeOnSelect />Stay rules
From today to March, 2 to 7 nights, never across a booked night. The second picker starts a new range on every click after a complete one.
stay: none to none; reset: 2026-10-05 to 2026-10-09
Code
<DateRangePicker from={stay.from} to={stay.to} min={today} max="2027-03-31"
minNights={2} maxNights={7} disabledDates={BOOKED} excludeDisabled />
<DateRangePicker from={r.from} to={r.to} resetOnSelect />Presets
The footer slot holds quick ranges; one sets both ends and closes.
none to none
Code
<DateRangePicker from={report.from} to={report.to} open={state.open}>
<div slot="footer" class="presets">
<Button e:for={p of PRESETS} size="sm" onclick={() => setPreset(state, p.days)}>{p.label}</Button>
</div>
</DateRangePicker>In a form
startName and endName submit both ends; required blocks the form until both are set.
not submitted
Code
<form onsubmit={(e) => book(e)}>
<DateRangePicker from={b.from} to={b.to} startName="checkin" endName="checkout" required />
<Button type="submit">Book</Button>
</form>In a field
Field labels the picker, describes it and shows its error. A form reset clears the range, as it does a native date input.
Code
<Field label="Stay" description="Check-in to check-out." required>
<DateRangePicker from={stay.from} to={stay.to} startName="checkin" endName="checkout" />
</Field>Cancel and OK
actions adds Cancel and OK under the months, as the APG date picker dialog: OK keeps the picked range, Cancel or Escape puts back the range it opened with.
2026-10-12 to 2026-10-16
events: none
Code
<DateRangePicker from={trip.from} to={trip.to} actions modal yearButtons />Typed range
Two DatePicker text fields type each end, each with its format described (APG textbox). Each bounds the other, so the end cannot come before the start.
2026-10-12 to 2026-10-16
Code
<Field label="Check-in">
<DatePicker value={stay.from} input max={stay.to} />
</Field>
<Field label="Check-out">
<DatePicker value={stay.to} input min={stay.from} />
</Field>Locale
Intl joins the two ends the way the language does.
Code
<DateRangePicker from={r.from} to={r.to} locale="de-DE" placeholder="Zeitraum wählen" />Other calendars
calendar passes to the months and the text: the Persian calendar in English, with the range written in Persian dates. from and to stay Gregorian ISO dates.
from: 2026-10-30; to: 2026-11-09
Code
<DateRangePicker from={r.from} to={r.to} calendar="persian" locale="en-US" />Controlled
from, to and open are two-way: open it, clear it or set it from anywhere.
open: false; events: none; none to none
Code
<DateRangePicker from={state.from} to={state.to} open={state.open} onOpenChange={(o) => log(o)} />
<Button onclick={() => state.open = true}>Open</Button>
<Button onclick={() => { state.from = ""; state.to = ""; }}>Clear</Button>Sizes and states
Three sizes from the control tokens, disabled, read only and invalid. label names the button for assistive tech, modal traps focus in the popover with year buttons beside the months, and block fills the row.
Code
<DateRangePicker size="sm" />
<DateRangePicker size="lg" />
<DateRangePicker from="2026-10-12" to="2026-10-16" disabled />
<DateRangePicker from="2026-10-12" to="2026-10-16" readOnly />
<DateRangePicker invalid />
<DateRangePicker label="Stay" modal yearButtons />
<DateRangePicker block />Right to left
Arabic, right to left: the months and days read right to left, and labels name the month buttons in Arabic.
Code
<div dir="rtl">
<DateRangePicker locale="ar-EG" dir="rtl" placeholder="اختر الفترة"
labels={{ previous: "الشهر السابق", next: "الشهر التالي" }} />
</div>