Guide
Options and methods
Options for both pickers
| Option | Default | |
|---|---|---|
locale |
page lang, else the browser's |
Names, digits, date order, week start, direction |
calendar |
'gregory' |
'islamic-umalqura', 'islamic-civil', 'islamic-tbla', 'persian', 'buddhist' |
secondaryCalendar |
none | A second calendar shown small in each day, e.g. Hijri under Gregorian |
weekStart |
from the locale | ISO weekday: 1 = Monday … 7 = Sunday |
timeZone |
the device's | Decides what "today" is, e.g. 'Asia/Dubai' |
min, max |
none | ISO dates |
disabled |
[] |
Dates, ranges, weekdays or functions — see Rules |
enabled |
none | When set, only these dates can be chosen |
months |
'auto' |
Months side by side. Auto shows two for ranges on wide screens |
weekNumbers |
false |
ISO week numbers in the first column |
format |
{ dateStyle: 'medium' } |
Intl options for the input, or 'numeric' |
inline |
none | Render an always-open calendar into this element |
name |
the input's name |
Name of the hidden ISO input |
sheet |
'auto' |
Bottom sheet at 640px and below. true or false to force |
theme |
'auto' |
'light', 'dark' or 'auto' (follows prefers-color-scheme) |
strings |
English | Labels and messages — see Calendars and languages |
decorate |
none | (iso, day) => ({ badge, className, label, disabled }) for each day |
footer |
true |
Show Today and Clear |
typing |
true |
Read typed dates and words like "next friday" |
Single-date options
| Option | Default | |
|---|---|---|
value |
the input's ISO value | Initial date |
multiple |
false |
Pick several separate dates (posts name[]) |
closeOnSelect |
true |
Close after a pick |
onChange |
(iso: string | null) => void |
|
onMultipleChange |
(dates: string[]) => void |
Range options
| Option | Default | |
|---|---|---|
start, end |
none | Initial range |
endInput |
none | A second input for the end date |
presets |
Today, Yesterday, Last 7/30 days, This/Last month, Year to date | Preset ids or your own presets. false hides the list |
minLength, maxLength |
none | In days, counting both ends |
allowDisabledInside |
false |
Let a range span disabled days |
confirm |
false |
Show Cancel and Apply |
onChange |
({ start, end }) => void |
Methods
| Method | |
|---|---|
getValue() / setValue(iso | iso[] | null) |
Single and multiple pickers |
getValues() |
Every chosen date, sorted |
getDate() |
The value as a UTC-midnight Date, for APIs that need one |
getRange() / setRange(start, end) |
Range pickers |
getProblem() |
'too_short', 'too_long', 'contains_disabled' or null |
open() / close() / isOpen() |
|
goTo(iso) |
Show a month without changing the value |
setOptions(partial) |
Change locale, limits, theme… on a live picker |
destroy() |
Remove the picker and restore the original input |
Events
| Event | Where | Detail |
|---|---|---|
dx:datechange |
the visible input | ISO string, array, or { start, end } |
input, change |
the hidden input(s) | — |
Updated 12 Sep 2026