Date Picker
Timezone-safe date picker with Hijri calendars, natural-language typing and a mobile sheet.
npm install @devix-labs/date-picker
Date and date range picker built on plain dates instead of Date objects, so a day chosen anywhere is the day stored. Types like a text field, speaks every Intl locale, draws Hijri and Persian calendars, and follows the WAI-ARIA date picker pattern. Zero dependencies; vanilla JS, React, Vue, Svelte, web components and jQuery.
What you get
Never off by a day
Plain calendar dates and ISO strings end to end. Browser-tested from UTC+14 to UTC−11.
Type it
3/4/2026 in the locale's order, next friday, in 2 weeks, +10d — and Arabic and Urdu words.
Hijri and Persian
Umm al-Qura, civil and Persian calendars from Intl, or Hijri days under Gregorian ones.
Ranges that think
Presets, a live preview band, length limits that grey out unreachable days, comparison periods.
Accessible
WAI-ARIA dialog and grid, full keyboard model, RTL mirroring, forced colours, bottom sheet on phones.
14 KB, no dependencies
Every locale from Intl — no locale files. The typing parser loads on first focus.
Why another date picker?
The popular ones each fall short somewhere:
- flatpickr is small, but it hasn't released since 2022.
- react-datepicker works only in React and weighs 45 KB with date-fns.
- air-datepicker has no multiple months or week numbers.
- litepicker, easepick and Duet are archived.
Nearly all of them build on JavaScript Date objects, which is how a date chosen in Dubai arrives in
London as the day before.
Devix Date Picker treats a date as a day on the calendar, not a moment in time. Its whole API speaks ISO
strings like "2026-09-18", so nothing is ever off by one. On top of that: typing, presets, Hijri
calendars and a keyboard model that follows the WAI-ARIA pattern. It all fits in about 14 KB.
import { createDatePicker } from '@devix/date-picker';
createDatePicker(document.querySelector('#due'), {
min: '2026-09-01',
disabled: [{ weekdays: [6, 7] }, '2026-12-25'],
timeZone: 'Asia/Dubai',
});
What it handles for you
| Situation | What happens |
|---|---|
| A visitor in Honolulu picks 30 March | The server receives 2026-03-30 — tested from UTC+14 to UTC−11 |
Someone types next friday or 3/4 |
Read as a date, in the locale's own day/month order |
An Arabic keyboard types ١٨/٩/٢٠٢٦ |
Read as 18 September 2026 |
| A Saudi form needs the Hijri calendar | calendar: 'islamic-umalqura' — grid, heading and typing in Hijri, ISO stored |
| A 14-night maximum stay | After check-in, nights beyond 14 are greyed out, not rejected afterwards |
| "Last 30 days" at 00:01 | Worked out when chosen, in the business's time zone |
| The picker opens inside a modal dialog | It renders in the top layer, above the dialog |
| A phone | A bottom sheet with thumb-sized days |
Demos
All demos →Date field
Weekends off, a minimum date, and typing that understands “next friday”.
Report ranges
Presets, two months, a 90-day limit and the comparison period.
Hijri and Arabic
An Umm al-Qura calendar in Arabic, right to left — and a Gregorian one with Hijri days underneath.
Booking with prices
Nightly prices as badges, sold-out nights, a 2–14 night stay, and check-in / check-out inputs.
Theming
One picker, five design systems — each a handful of CSS variables. Includes a Tailwind classNames example.
Fifteen languages
The same range picker in every language the package ships — buttons, messages, presets and the count of days,...
How it compares
Questions
Why do other pickers give me the wrong day?
They store a JavaScript Date, which is a moment in time; midnight in one zone is the previous day in another. This picker never uses a Date for a calendar date — values are ISO strings like 2026-09-18.
Does it pick times?
Not in 1.0. Pair it with an input type="time" for now; Devix Time Picker is on the roadmap.
Which languages does it support?
Every locale the browser's Intl knows for dates, names and digits. Interface labels are English by default and fully translatable through the strings option.
Is the Hijri calendar accurate?
It uses the browser's own Umm al-Qura data. Every day from 1900 to 2100 is converted and round-tripped in the test suite. Stored values stay Gregorian ISO dates.
Can I use it commercially?
Yes. It is MIT licensed.
More from Devix
All resources →Phone Input
UI component
International phone field with as-you-type formatting, validation and lazy per-country metadata.
Date Range Picker
UI component
Ranges with presets, compare periods and multi-month views.
Select
UI component
Searchable, virtualised select that handles 100k options. A drop-in select2 replacement.