The Date Picker is a comprehensive tool for date selection within your application. It supports various view modes (day, month, year), single date selection, and range selection. This component also allows the rendering of multiple grids for a broader date range view.
| Prop | Type | Default |
|---|---|---|
defaultValue | DateValue[] | |
dir | 'ltr' | 'rtl' | "ltr" |
disabled | boolean | |
fixedWeeks | boolean | |
focusedValue | DateValue | |
format | (date: DateValue[]) => string | |
getRootNode | () => ShadowRoot | Node | Document | |
id | string | |
ids | Partial<{ grid(id: string): string; header: string; content: string; cellTrigger(id: string): string; prevTrigger(view: DateView): string; nextTrigger(view: DateView): string; ... 7 more ...; positioner: string; }> | |
inline | boolean | |
isDateUnavailable | (date: DateValue, locale: string) => boolean | |
locale | string | |
max | DateValue | |
messages | IntlMessages | |
min | DateValue | |
modal | boolean | |
name | string | |
numOfMonths | number | |
onFocusChange | (details: FocusChangeDetails) => void | |
onOpenChange | (details: OpenChangeDetails) => void | |
onValueChange | (details: ValueChangeDetails) => void | |
onViewChange | (details: ViewChangeDetails) => void | |
parse | (value: string) => DateValue[] | |
positioning | PositioningOptions | |
readOnly | boolean | |
selectionMode | SelectionMode | |
startOfWeek | number | |
timeZone | string | |
value | DateValue[] | |
view | DateView | "day" |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean | |
columns | number | |
id | string | |
view | DateView |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
value | DateValue | |
asChild | boolean | |
disabled | boolean | |
offset | Offset |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
value | number | |
asChild | boolean | |
disabled | boolean |
| Prop | Type | Default |
|---|---|---|
value | number | |
asChild | boolean | |
disabled | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean | |
view | DateView |
| Prop | Type | Default |
|---|---|---|
asChild | boolean | |
view | DateView |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |