Date Range Picker
Ranges with presets, compare periods and multi-month views.
npm install @devix-labs/date-range-picker
A date range picker with 17 presets, a live preview band, length limits that grey out unreachable days, Apply/Cancel mode, previous-period comparisons, nightly-price badges, Hijri calendars and a WAI-ARIA keyboard grid. Zero dependencies; vanilla JS, React, Vue, Svelte and web components.
What you get
Presets that stay fresh
Last 7 days, this quarter, year to date… resolved when chosen, in your time zone and week start.
See it before you choose
A live band follows the pointer or arrow keys; days out of reach grey out after the first click.
Bookings
Check-in and check-out inputs, prices as badges, sold-out nights that can't be crossed.
Comparisons
Previous period or previous year — whole months compare with whole months.
Apply or cancel
Confirm mode for filters that run expensive queries: one change event, only on Apply.
Keyboard and RTL
Enter, arrows, Enter. Right-to-left pages mirror the band and the keys.
Built for the ranges people actually pick
Reports want "Last 30 days" and a comparison with the period before. Bookings want check-in and check-out, prices on each night, and no way to pick a stay across a sold-out date. Exports want nothing to happen until Apply.
Most range pickers handle one of these through plugins, and many are archived:
- litepicker and easepick are archived.
- daterangepicker needs jQuery and moment.
import { createDateRangePicker } from '@devix/date-range-picker';
createDateRangePicker(document.querySelector('#stay'), {
endInput: document.querySelector('#check-out'),
minLength: 3,
maxLength: 15,
decorate: (iso) => (soldOut.has(iso) ? { badge: 'Full', disabled: true } : { badge: prices[iso] }),
});
What it handles for you
| Situation | What happens |
|---|---|
| The second click lands before the first | The ends swap instead of an error |
| A 14-night maximum | After check-in, nights beyond reach are greyed out |
| A sold-out night in the middle | The range can't cross it, unless allowDisabledInside |
| "This week" in Cairo, Riyadh or Dubai | Saturday, Sunday or Monday start, from the locale |
| Comparing June with the period before | May 1–31, not the 30 days before June |
| Keyboard only | Enter sets the start, arrows preview the band, Enter sets the end |
| Right-to-left pages | The band, arrows and panel all mirror |
Demos
All demos →Analytics filter
Presets, two months, a 90-day cap and the previous-period comparison.
Hotel stay
Check-in and check-out inputs, nightly prices, sold-out nights, 2–14 nights.
Apply and cancel
Confirm mode for filters that trigger expensive queries — nothing changes until Apply.
Two months side by side
months: 2 shows consecutive months together; on narrow screens it falls back to one, and presets move above th...
How it compares
Questions
How is this different from Devix Date Picker?
It's the same engine. This package ships only the range picker and range-focused docs; @devix/date-picker includes single, multiple and range pickers.
Does it need jQuery or moment?
No. It has no dependencies. Values are ISO date strings.
What gets posted to my server?
Hidden inputs: name_start and name_end in one-input mode, or each input's own name with two inputs — always YYYY-MM-DD.
Can a range cross unavailable dates?
Not by default — days past the next disabled day are greyed out after the first click. Set allowDisabledInside to allow it.
Is it free for commercial use?
Yes, MIT licensed.
More from Devix
All resources →Phone Input
UI component
International phone field with as-you-type formatting, validation and lazy per-country metadata.
Date Picker
UI component
Timezone-safe date picker with Hijri calendars, natural-language typing and a mobile sheet.
Select
UI component
Searchable, virtualised select that handles 100k options. A drop-in select2 replacement.