Comparison
Date Range Picker vs daterangepicker
Measured, not claimed. Sizes are minified and gzipped, against the versions and date shown in the table. Feature notes reflect each project's documentation and public issue tracker on that date — if something has changed, tell us and we'll update this page.
| Measure | Date Range Picker | daterangepicker |
|---|---|---|
| Checked on | 2026-09-11 | 2026-09-12 |
| Version | 1.0.0 | 3.1.0 |
| Runtime dependencies | 0 | jQuery ≥ 1.10 and moment ^2.9.0 |
| Date values | ISO strings (plain dates) | moment objects |
Features
| Feature | Date Range Picker | daterangepicker |
|---|---|---|
| Preset ranges | ||
| Apply / Cancel | ||
| Works without jQuery and moment | ||
| Presets resolved when chosen, in a set time zone | ||
| Unreachable days greyed out after the first click | ||
| Price or availability badges per day | ||
| Comparison periods | ||
| Hijri calendars and right-to-left layout | ||
| WAI-ARIA keyboard grid | ||
| React, Vue, Svelte and web components | ||
| Time selection |
Migrating from daterangepicker
title: Migrating from daterangepicker section: Guides order: 6
daterangepicker (3.1.0) is the classic Bootstrap-era range picker, and it depends on jQuery and moment. This package needs neither.
| daterangepicker | Devix Date Range Picker |
|---|---|
$('#x').daterangepicker(opts, cb) |
createDateRangePicker(el, { ...opts, onChange }) |
startDate, endDate (moment or string) |
start, end (ISO strings) |
minDate, maxDate |
min, max |
maxSpan: { days: 30 } |
maxLength: 31 (counts both ends) |
ranges: { 'Last 7 Days': [moment().subtract(6, 'days'), moment()] } |
presets: ['last7'], or { id, label, range } |
isInvalidDate: fn |
disabled: [fn] |
isCustomDate: fn (CSS class) |
decorate: (iso) => ({ className }) |
autoApply: true |
the default — use confirm: true for Apply/Cancel |
singleDatePicker: true |
use createDatePicker from @devix/date-picker |
showWeekNumbers, showISOWeekNumbers |
weekNumbers: true (ISO) |
locale: { format, firstDay, daysOfWeek, monthNames } |
format (Intl options), weekStart; names come from locale |
opens, drops |
automatic, flips to fit the viewport; a bottom sheet on phones |
callback (start, end, label) |
onChange({ start, end }) |
timePicker: true |
not available in 1.0 |
Differences to know
- ISO strings replace moment objects. Use
parseIsoandtoIsoto convert, or thestartandendstrings directly. - The posted values are hidden inputs:
<name>_startand<name>_end, or each input's own name in two-input mode. There's no formatted string to parse on the server. - Keyboard and screen reader support follow the WAI-ARIA date picker pattern.
daterangepicker is a trademark of its respective owners. Visit daterangepicker.