Range Calendar
Presents a calendar view tailored for selecting date ranges.
Features
- Full keyboard navigation
- Can be controlled or uncontrolled
- Focus is fully managed
- Localization support
- Highly composable
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
calendarLabel | string | - |
defaultPlaceholder | DateValue | - |
defaultValue | DateRange | `() => ({ start: undefined, end: undefined })` |
dir | Direction | ltr |
disabled | boolean | false |
fixedWeeks | boolean | false |
initialFocus | boolean | false |
isDateDisabled | Matcher | undefined |
isDateUnavailable | Matcher | undefined |
locale | 'tr' | 'th' | 'ach' | 'af' | 'am' | 'an' | 'ar' | 'ast' | 'az' | 'be' | 'bg' | 'bn' | 'br' | 'bs' | 'ca' | 'cak' | 'ckb' | 'cs' | 'cy' | 'da' | 'de' | 'dsb' | 'el' | 'en' | 'eo' | 'es' | ... 49 more ... | - |
maxValue | DateValue | - |
minValue | DateValue | - |
modelValue | DateRange | - |
numberOfMonths | number | 1 |
pagedNavigation | boolean | false |
placeholder | DateValue | undefined |
preventDeselect | boolean | false |
readonly | boolean | false |
weekdayFormat | WeekDayFormat | narrow |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 |
| Event | Type |
|---|---|
update:modelValue | [_date: DateRange] |
update:placeholder | [_date: DateValue] |
update:startValue | [_date: DateValue] |
| Slot (default) | Type |
|---|---|
date | DateValue |
grid | Grid<DateValue> |
weekDays | string[] |
| Data attribute | Value |
|---|---|
[data-readonly] | Present when readonly |
[data-disabled] | Present when disabled |
[data-invalid] | Present when invalid |
Header
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
Heading
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
| Slot (default) | Type |
|---|---|
headingValue | string |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
Prev
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
Next
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
Grid
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | table |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-readonly] | Present when readonly |
[data-disabled] | Present when disabled |
Grid Head
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | thead |
asChild | boolean | false |
Grid Body
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | tbody |
asChild | boolean | false |
Grid Row
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | tr |
asChild | boolean | false |
Head Cell
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | th |
asChild | boolean | false |
Cell
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | td |
asChild | boolean | false |
date | DateValue | - |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
Cell Trigger
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
day | DateValue | - |
month | DateValue | - |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-selected] | Present when selected |
[data-value] | The ISO string value of the date. |
[data-unavailable] | Present when unavailable |
[data-today] | Present when today |
[data-outside-view] | Present when the date is outside the current month it is displayed in. |
[data-outside-visible-view] | Present when the date is outside the months that are visible on the calendar. |
[data-selection-start] | Present when the date is the start of the selection. |
[data-selection-end] | Present when the date is the end of the selection. |
[data-highlighted] | Present when the date is highlighted by the user as they select a range. |
[data-highlighted-start] | Present when the date is the start of the range that is highlighted by the user. |
[data-highlighted-end] | Present when the date is the end of the range that is highlighted by the user. |
[data-focused] | Present when focused |