Comparison
Date Picker vs flatpickr
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 Picker | flatpickr |
|---|---|---|
| Checked on | 2026-09-11 | 2026-09-11 |
| Version | 1.0.0 | 4.6.13 (released 2022-04-14) |
| JavaScript, min+gzip | 14.0 KB first load (+2.2 KB parser on focus) | 14.4 KB (bundlephobia), locales separate |
| Runtime dependencies | 0 | 0 |
| Locale data | Intl — every locale, nothing to import | Bundled locale files |
Features
| Feature | Date Picker | flatpickr |
|---|---|---|
| Range and multiple selection | ||
| Values immune to time-zone shifts (plain dates) | ||
| Natural-language typing ("next friday") | ||
| Range presets | ||
| Hijri and Persian calendars | ||
| Right-to-left layout | ||
| WAI-ARIA grid with full keyboard model | limited | |
| Today button and month/year views | ||
| Bottom sheet on phones | native input instead | |
| React, Vue and Svelte wrappers | community | |
| Time selection | ||
| Plugin system |
Migrating from flatpickr
title: Migrating from flatpickr section: Guides order: 10
| 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' — no locale files |
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.
flatpickr is a trademark of its respective owners. Visit flatpickr.