Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

MultiDatePicker

MultiDatePicker is a component used for users to select multiple dates.

Source@yamada-ui/calendar

Props

MultiDatePickerProps

allowInput

Description

If true, allows input.

Type

boolean

Default

true

allowInputBeyond

Description

If true, allows input of dates beyond the minDate and maxDate restrictions.

Type

boolean

Default

true

amountOfMonths

Description

The number of months to display.

Type

number

Default

1

animation

Description

The animation of the popover.

Type

"bottom" | "left" | "right" | "scale" | "top" | "none"

Default

'scale'

boundary

Description

The boundary area for the popper. Used within the preventOverflow modifier.

Type

HTMLElement | "clippingParents" | "scrollParent"

Default

'clippingParents'

calendarColorScheme

Description

ColorScheme for the calendar component.

Type

ThemeColorScheme

calendarProps

Description

Props for calendar component.

Type

CalendarBaseProps

calendarSize

Description

Size for the calendar component.

Type

UIValue<"lg" | "md" | "sm" | ({} & string) | "full">

calendarVariant

Description

Variant for the calendar component.

Type

UIValue<({} & string) | "solid" | "subtle" | "unstyled">

clearable

Description

If true, display the date picker clear icon.

Type

boolean

Default

true

clearIconProps

Description

Props for date picker clear icon element.

Type

DatePickerIconProps

closeDelay

Description

The number of delay time to close.

Type

number

Default

200

closeOnBlur

Description

If true, the popover will close when you blur out it by clicking outside or tabbing out.

Type

boolean

Default

true

closeOnEsc

Description

If true, the popover will close when you hit the Esc key.

Type

boolean

Default

true

closeOnMaxSelect

Description

If true, the calendar component will be closed when value is max selected.

Type

boolean

Default

true

closeOnSelect

Description

If true, the calendar component will be closed when value is selected.

Type

boolean

Default

false

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

component

Description

The custom display value to use.

Type

FC<{ index: number label: string value: Date onRemove: MouseEventHandler<HTMLElement> }>

containerProps

Description

Props for date picker container element.

Type

Omit<HTMLUIProps, "children">

contentProps

Description

Props for date picker container element.

Type

Omit<MotionProps, "children">

dateFormat

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-formats

defaultIsOpen

Deprecated

Description

If true, the popover will be initially opened.

Deprecated

Use defaultOpen instead

Type

boolean

defaultMonth

Description

The initial month of the calendar.

Type

Date

Default

'new Date()'

defaultOpen

Description

If true, the popover will be initially opened.

Type

boolean

defaultType

Description

The initial type of the calendar.

Type

"month" | "date" | "year"

defaultValue

Description

The initial value of the calendar.

Type

Date[]

disabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

disableOutsideDays

Description

If true, outside days will be disabled.

Type

boolean

Default

false

duration

Description

The animation duration.

Type

number | MotionLifecycleProps<number>

errorBorderColor

Description

The border color when the input is invalid.

Type

string

eventListeners

Description

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

Type

type ONLY_FOR_FORMAT = | boolean | { resize?: boolean | undefined; scroll?: boolean | undefined }

Default

true

excludeDate

Description

Callback function to determine whether the day should be disabled.

Type

(date: Date) => boolean

fieldProps

Description

Props for date picker field element.

Type

Omit<HTMLUIProps, "children">

firstDayOfWeek

Description

Define the first day of the week.

Type

"monday" | "sunday"

Default

'monday'

flip

Description

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

Type

boolean

Default

true

focusBorderColor

Description

The border color when the input is focused.

Type

string

gutter

Description

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

Type

UIValue<number>

Default

8

hiddenOutsideDays

Description

If true, outside days will be hidden.

Type

boolean

holidays

Description

Define holidays.

Type

Date[]

iconProps

Description

Props for date picker icon element.

Type

DatePickerIconProps

inputProps

Description

Props for date picker input element.

Type

HTMLUIProps<"input">

invalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isClearable

Deprecated

Description

If true, display the date picker clear icon.

Deprecated

Use clearable instead.

Type

boolean

Default

true

isDisabled

Deprecated

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isInvalid

Deprecated

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

isLazy

Deprecated

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Deprecated

Use lazy instead

Type

boolean

Default

false

isOpen

Deprecated

Description

If true, the popover will be opened.

Deprecated

Use open instead

Type

boolean

isReadOnly

Deprecated

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

isRequired

Deprecated

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

keepPlaceholder

Description

If true, keep the placeholder.

Type

boolean

Default

false

lazy

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Type

boolean

Default

false

lazyBehavior

Description

The lazy behavior of popover's content when not visible. Only works when lazy={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'

matchWidth

Description

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

maxDate

Description

The maximum possible date.

Type

Date

maxSelectValues

Description

The maximum selectable value.

Type

number

minDate

Description

The minimum possible date.

Type

Date

minSelectValues

Description

The minimum selectable value.

Type

number

month

Description

The month of the calendar.

Type

Date

offset

Description

The main and cross-axis offset to displace popper element from its reference element.

Type

[number, number]

onChange

Description

The callback invoked when value state changes.

Type

(value: Date[]) => void

onChangeMonth

Description

The callback invoked when month state changes.

Type

(value: Date) => void

onChangeType

Description

The callback invoked when type state changes.

Type

( type: "month" | "date" | "year", year?: number | undefined, month?: number | undefined, ) => void

onClose

Description

Callback fired when the popover closes.

Type

() => void

onOpen

Description

Callback fired when the popover opens.

Type

() => void

open

Description

If true, the popover will be opened.

Type

boolean

openDelay

Description

The number of delay time to open.

Type

number

Default

200

paginateBy

Description

The number of months to paginate.

Type

number

Default

1

parseDate

Description

Function that converts the input value to Date type.

Type

(value: string) => Date | undefined

pattern

Description

The pattern used to check the input element.

Type

RegExp

Default

'/[^0-9-/]/g'

placement

Description

The placement of the popper relative to its reference.

Type

UIValue<Placement>

Default

'bottom'

portalProps

Description

Props to be forwarded to the portal component.

Type

Omit<PortalProps, "children">

Default

'{ disabled: true }'

preventOverflow

Description

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

Type

boolean

Default

true

readOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

required

Description

If true, the form control will be required.

Type

boolean

Default

false

separator

Description

The visual separator between each value.

Type

string

Default

','

size

Description

The size of the MultiDatePicker.

Type

"xs" | "sm" | "md" | "lg" | "xl"

Default

"md"

strategy

Description

The CSS positioning strategy to use.

Type

"absolute" | "fixed"

Default

'absolute'

today

Description

If true, highlight today.

Type

boolean

Default

false

type

Description

The type of the calendar.

Type

"month" | "date" | "year"

value

Description

The value of the calendar.

Type

Date[]

variant

Description

The variant of the MultiDatePicker.

Type

"filled" | "flushed" | "outline" | "unstyled"

Default

"outline"

weekendDays

Description

Define weekend days.

Type

number[]

Default

'[0, 6]'

withControls

Description

If true, display the calendar control buttons.

Type

boolean

Default

true

withHeader

Description

If true, display the calendar header.

Type

boolean

Default

true

withLabel

Description

If true, display the calendar label button.

Type

boolean

Default

true

withWeekdays

Description

If true, display the calendar weekdays.

Type

boolean

Default

true

Edit this page on GitHub

PreviousDatePickerNextRangeDatePicker