Guides

Migrating from daterangepicker

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-labs/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 parseIso and toIso to convert, or the start and end strings directly.
The posted values are hidden inputs: <name>_start and <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.

Updated 15 Sep 2026