Changelog
Every release of Date Picker, newest first. Breaking changes are flagged.
v1.2.0
15 Sep 2026
Added#
- Fifteen language packs, at
@devix-labs/date-picker/locales: Arabic, Urdu, French, German, Spanish,
Portuguese, Italian, Dutch, Turkish, Russian, Polish, Hindi, Indonesian, Chinese and Japanese.
registerAll() takes all of them; registerStrings('ar', ar) takes one, and a bundler ships only
what you name — about 0.5 KB gzipped each, 7.5 KB for all fifteen. The widget itself carries none
of it.
registerStrings(locale, pack) and stringsFor(locale). Registration is global, so a locale set in
markup — <dx-date-picker locale="ar"> — is translated too. An exact tag beats the language, so
pt-BR can differ from pt.
- A pack is a function of the locale, not a fixed table, so it gets right what a table cannot:
ar-EG
counts in ٧ and ar-AE in 7, and the number of days agrees with the count through
Intl.PluralRules — Arabic's dual (يومان), Russian's three forms, Polish's four.
presetLabels in DatePickerStrings: the built-in range presets are translated with everything
else, so an Arabic range picker no longer shows Last 7 days beside its calendar. Presets of your
own keep their own labels.
- Languages demo: the same range picker in all fifteen.
Fixed#
- A date typed faster than the parser chunk downloaded showed no live preview at all. The field is
read again the moment the parser lands, instead of the last keystroke being the last chance to
parse it.
Changed#
- The picker grew about 300 bytes gzipped to carry the language registry; the size budgets moved with
it.
v1.1.0
12 Sep 2026
Added#
theme: 'auto' matches the host page (theme markers, then the real background) and follows theme
toggles live.
classNames for every part and state, including range states kept in sync during hover previews.
icons for the calendar, previous and next buttons.
date-picker.layer.css (@devix-labs/date-picker/styles.layer.css) in @layer devix.
- Size and type variables:
--dxd-panel-font-size, --dxd-panel-radius, --dxd-panel-padding,
--dxd-cell-radius, --dxd-day-font-size, --dxd-font-weight and --dxd-font-weight-strong.
- Styling and theming guide with shadcn/ui and Bootstrap recipes; Theming demo.
Changed#
- Compact defaults: 32px days, 13px text, 500-weight emphasis, neutral grey palette.
months shows as many months side by side as fit, up to the number asked for ('auto' gives ranges
two). When space is tight, presets move above the grid.
- The bottom sheet is used only on touch phones. Narrow desktop windows and iframes keep the dropdown.
- The calendar opens above the field when there's more room there, and scrolls instead of being cut
off when neither side fits.
v1.0.0
12 Sep 2026
Added#
createDatePicker: single or multiple dates, attached to an input or inline.
createDateRangePicker: one input or a start/end pair, with a hover and keyboard preview band,
presets, minLength / maxLength, unreachable days disabled after the first click, and an optional
Apply step.
- Plain-date model: values are ISO strings, and days are integers internally. There is no time-zone
shifting;
timeZone decides only what "today" is.
- Typed input in the locale's field order, compact digits, month names, and relative words in English,
Arabic and Urdu. The parser loads on first focus.
- Locales, digits, week start and right-to-left layout from Intl.
- Calendars:
islamic-umalqura, islamic-civil, islamic-tbla, persian and buddhist, plus a
secondary calendar shown under each day.
- Rules:
min, max, disabled and enabled as dates, ranges, weekdays or functions; decorate
adds badges, classes, labels and disabled days.
- Month and year views, week numbers, Today and Clear.
- WAI-ARIA date picker dialog: grid roles, roving tabindex, the full keyboard model, focus trap, live
announcements, a bottom sheet at 640px and below, forced-colours and reduced-motion support. It also
works inside modal
<dialog> elements.
- Hidden ISO inputs for plain form posts,
dx:datechange events, form reset, and destroy() restoring
the original input.
- Wrappers: React (
DatePicker, DateRangePicker), Vue 3, Svelte actions, form-associated
<dx-date-picker> and <dx-date-range-picker>, and a jQuery plugin.
- A DOM-free core (
@devix-labs/date-picker/core) with date arithmetic, parsing, presets and
comparisonRange.