Guides
Migrating from flatpickr
| flatpickr | Devix Date Picker |
|---|---|
flatpickr(el, opts) |
createDatePicker(el, opts) |
mode: 'range' |
createDateRangePicker(el, opts) |
mode: 'multiple' |
createDatePicker(el, { multiple: true }) |
defaultDate |
value (range: start, end) |
minDate, maxDate |
min, max (ISO strings) |
disable: [date, { from, to }, fn] |
disabled: [iso, { from, to }, fn] — plus { weekdays: [...] } |
enable |
enabled |
inline: true |
inline: containerElement |
showMonths: 2 |
months: 2 |
weekNumbers: true |
weekNumbers: true |
locale: Arabic (imported file) |
locale: 'ar' — month and weekday names need no file at all |
l10n files, one per language |
registerAll() once, or registerStrings('ar', ar) for one — the packs carry only the buttons and messages, because Intl already knows the names |
locale: { firstDayOfWeek: 1 } |
weekStart: 1 |
altInput + altFormat / dateFormat |
Built in: the visible input is formatted by format, the hidden input posts ISO |
allowInput: true |
Built in: typing is on by default and understands words |
onChange(selectedDates, dateStr) |
onChange(iso) / onChange({ start, end }) |
instance.setDate(d) |
setValue(iso) / setRange(start, end) |
instance.clear(), open(), close(), destroy() |
setValue(null), open(), close(), destroy() |
onDayCreate |
decorate |
Differences to know
- Values are ISO strings, not
Dateobjects. This is what removes the off-by-one-day bugs. If something needs aDate, usegetDate(), which returns UTC midnight. - No time picker in 1.0. For date-and-time fields, pair the picker with an
<input type="time">, or keep flatpickr for those fields until Devix Time Picker ships. - No plugins. Presets, badges (
decorate), month and year views, and range limits are built in. - Styling uses CSS custom properties. Replace flatpickr's theme files with a few
--dxd-*variables.
Updated 15 Sep 2026