Skip to content
Devix Open Source

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.