allowInput
Description
If true
, allows input.
Type
boolean
Default
true
Leave Yamada UI a star
StarDatePicker
is a component used for users to select a date.
Description
If true
, allows input.
Type
boolean
Default
true
Description
If true
, allows input of dates beyond the minDate
and maxDate
restrictions.
Type
boolean
Default
true
Description
The number of months to display.
Type
number
Default
1
Description
The animation of the popover.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"
Default
'scale'
Description
The boundary area for the popper. Used within the preventOverflow
modifier.
Type
HTMLElement | "clippingParents" | "scrollParent"
Default
'clippingParents'
Description
ColorScheme for the calendar component.
Type
(string & {}) | "link" | "blue" | "cyan" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "orange" | "pink" | "purple" | "red" | "teal" | "violet" | "yellow" | "primary" | "secondary" | ... 11 more ... | "sky"
Description
Props for calendar component.
Type
CalendarBaseProps
Description
Size for the calendar component.
Type
UIValue<(string & {}) | "sm" | "md" | "lg" | "full">
Description
Variant for the calendar component.
Type
UIValue<(string & {}) | "solid" | "unstyled" | "subtle">
Description
Props for date picker clear icon element.
Type
DatePickerIconProps
Description
If true
, the popover will close when you blur out it by clicking outside or tabbing out.
Type
boolean
Default
true
Description
If true
, the popover will close when you hit the Esc
key.
Type
boolean
Default
true
Description
If true
, the calendar component will be closed when value is selected.
Type
boolean
Default
true
Description
The visual color appearance of the component.
Type
"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"
Description
Props for date picker container element.
Type
Omit<HTMLUIProps<"div">, "children">
Description
Props for month picker container element.
Type
Omit<MotionProps<"div">, "children">
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
string
Default
'MMMM YYYY'
Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsDescription
If true
, the popover will be initially opened.
Type
boolean
Description
The initial month of the calendar.
Type
Date
Default
'new Date()'
Description
The initial type of the calendar.
Type
"date" | "month" | "year"
Description
The initial value of the calendar.
Type
Date
Description
If true
, outside days will be disabled.
Type
boolean
Default
false
Description
The animation duration.
Type
number | Partial<Record<"exit" | "enter", number>>
Description
The border color when the input is invalid.
Type
string
Description
If provided, determines whether the popper will reposition itself on scroll
and resize
of the window.
Type
type ONLY_FOR_FORMAT =
| boolean
| { scroll?: boolean | undefined; resize?: boolean | undefined }
Default
true
Description
Callback function to determine whether the day should be disabled.
Type
(date: Date) => boolean
Description
Props for date picker field element.
Type
Omit<DatePickerFieldProps, "children" | "inputProps">
Description
Define the first day of the week.
Type
"sunday" | "monday"
Default
'monday'
Description
If true
, the popper will change its placement and flip when it's about to overflow its boundary area.
Type
boolean
Default
true
Description
The border color when the input is focused.
Type
string
Description
The distance or margin between the reference and popper.
It is used internally to create an offset
modifier.
Type
UIValue<number>
Default
8
Description
Define holidays.
Type
Date[]
Description
Props for date picker icon element.
Type
DatePickerIconProps
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
string
Default
'YYYY/MM/DD'
Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsDescription
Props for date picker input element.
Type
HTMLUIProps<"input">
Description
If true
, display the date picker clear icon.
Type
boolean
Default
true
Description
If true
, the form control will be disabled.
Type
boolean
Default
false
Description
If true
, the form control will be invalid.
Type
boolean
Default
false
Description
If true
, the PopoverContent rendering will be deferred until the popover is open.
Type
boolean
Default
false
Description
If true
, the popover will be opened.
Type
boolean
Description
If true
, the form control will be readonly.
Type
boolean
Default
false
Description
If true
, the form control will be required.
Type
boolean
Default
false
Description
The lazy behavior of popover's content when not visible. Only works when isLazy={true}
- unmount
: The popover's content is always unmounted when not open.
- keepMounted
: The popover's content initially unmounted, but stays mounted when popover is open.
Type
LazyMode
Default
'unmount'
Description
The locale of the calendar. Check the docs to see the locale of possible modifiers you can pass.
Type
string
Default
'en'
Docs
https://day.js.org/docs/en/i18n/instance-localeDescription
If true
, the popper will match the width of the reference at all times.
It's useful for autocomplete
, date-picker
and select
patterns.
Type
boolean
Default
false
Description
The maximum possible date.
Type
Date
Description
The maximum selectable value.
Type
number
Description
The minimum possible date.
Type
Date
Description
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Type
Partial<Modifier<string, any>>[]
Docs
https://popper.js.org/docs/v2/modifiers/Description
The month of the calendar.
Type
Date
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
string
Default
'MM'
Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsDescription
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]
Description
The callback invoked when value state changes.
Type
(value: Date | undefined) => void
Description
The callback invoked when month state changes.
Type
(value: Date) => void
Description
The callback invoked when type state changes.
Type
(
type: "date" | "month" | "year",
year?: number | undefined,
month?: number | undefined,
) => void
Description
Callback fired when the popover closes.
Type
() => void
Description
Callback fired when the popover opens.
Type
() => void
Description
The number of months to paginate.
Type
number
Default
1
Description
Function that converts the input value to Date type.
Type
(value: string) => Date | undefined
Description
The pattern used to check the input element.
Type
RegExp
Default
'/[^0-9-/]/g'
Description
The placement of the popper relative to its reference.
Type
UIValue<Placement>
Default
'bottom'
Description
Props to be forwarded to the portal component.
Type
Omit<PortalProps, "children">
Default
'{ isDisabled: true }'
Description
If true
, will prevent the popper from being cut off and ensure it's visible within the boundary area.
Type
boolean
Default
true
Description
The ref
of the element related to the popover.
This is used during the onBlur
event.
Type
RefObject<HTMLElement>
Description
The size of the DatePicker.
Type
"xs" | "sm" | "md" | "lg"
Default
md
Description
The CSS positioning strategy to use.
Type
"fixed" | "absolute"
Default
'absolute'
Description
If true
, highlight today.
Type
boolean
Default
false
Description
The type of the calendar.
Type
"date" | "month" | "year"
Description
The value of the calendar.
Type
Date
Description
The variant of the DatePicker.
Type
"outline" | "filled" | "flushed" | "unstyled"
Default
outline
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
string
Default
'dd'
Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsDescription
Define weekend days.
Type
number[]
Default
'[0, 6]'
Description
If true
, display the calendar control buttons.
Type
boolean
Default
true
Description
If true
, display the calendar header.
Type
boolean
Default
true
Description
If true
, display the calendar label button.
Type
boolean
Default
true
Description
If true
, display the calendar weekdays.
Type
boolean
Default
true
Description
The format used for conversion. Check the docs to see the format of possible modifiers you can pass.
Type
string
Default
'YYYY'
Docs
https://day.js.org/docs/en/display/format#list-of-localized-formatsEdit this page on GitHub