Iryx UIForms
IDateRangePicker
A two-month calendar for picking a span — a reporting period, a filter window, a stay. The model is a pair of ISO YYYY-MM-DD strings, like IDatePicker.
Both ends are null while nothing is chosen, and the first click sets start with end still null. Guard on period.end before querying with the range.
Months shown
Two months side by side is the default, since most ranges cross a month boundary. Drop to one where the popover has no room, or go to three for long ranges.
Bounds
Formatting and separator
format takes Intl.DateTimeFormatOptions and applies to both ends; separator is the text between them.
Locale and week start
clearLabel, previousLabel and nextLabel are props as well.
Clearable
Clearing sets both ends back to null.
Sizes
Invalid
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Control scale |
placeholder | string | 'Pick a date range' | Shown while nothing is selected |
disabled | boolean | — | Trigger cannot be opened |
invalid | boolean | — | Red border and ring; inherited from IFormField when unset |
id | string | — | Id for the trigger; IFormField supplies one |
min | string | — | Earliest selectable date, ISO YYYY-MM-DD |
max | string | — | Latest selectable date, ISO YYYY-MM-DD |
locale | string | — | Month names, weekday initials and trigger text |
format | Intl.DateTimeFormatOptions | — | How each end reads on the trigger |
weekStartsOn | 0–6 | — | 0 is Sunday. Defaults to the locale's convention |
months | number | 2 | Months shown side by side |
clearable | boolean | — | Adds a clear action to the footer |
separator | string | ' – ' | Text between the two dates on the trigger |
clearLabel | string | 'Clear' | Clear action label |
previousLabel | string | 'Previous month' | Accessible name for the back arrow |
nextLabel | string | 'Next month' | Accessible name for the forward arrow |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Applied to the trigger, which carries the field chrome |
ui | { trigger?, placeholder?, content?, header?, heading?, nav?, months?, grid?, headCell?, cell?, cellTrigger?, footer?, action? } | — | Per-slot class overrides |
Model
ts
interface DateRange {
start: string | null
end: string | null
}The popover closes once both ends are set.