MultiDatePicker

MultiDatePickerは、ユーザーが日付を複数選択するために使用されるコンポーネントです。

ソース @yamada-ui/calendar

Props

MultiDatePickerProps

説明

If true, allows input.

タイプ

boolean

デフォルト

true

説明

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

タイプ

boolean

デフォルト

true

説明

The number of months to display.

タイプ

number

デフォルト

1

説明

The animation of the popover.

タイプ

デフォルト

'scale'

説明

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

タイプ

HTMLElement | "clippingParents" | "scrollParent"

デフォルト

'clippingParents'

説明

ColorScheme for the calendar component.

タイプ

ThemeColorScheme

説明

Props for calendar component.

タイプ

CalendarBaseProps

説明

Size for the calendar component.

タイプ

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

説明

Variant for the calendar component.

タイプ

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

説明

If true, display the date picker clear icon.

タイプ

boolean

デフォルト

true

説明

Props for date picker clear icon element.

タイプ

DatePickerIconProps

説明

The number of delay time to close.

タイプ

number

デフォルト

200

説明

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

タイプ

boolean

デフォルト

true

説明

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

タイプ

boolean

デフォルト

true

説明

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

タイプ

boolean

デフォルト

true

説明

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

タイプ

boolean

デフォルト

false

説明

The visual color appearance of the component.

タイプ

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

説明

The custom display value to use.

タイプ

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

説明

Props for date picker container element.

タイプ

Omit<HTMLUIProps, "children">

説明

Props for date picker container element.

タイプ

Omit<MotionProps, "children">

説明

The format used for conversion. Check the docs to see the format of possible modifiers you can pass.

タイプ

string

デフォルト

'MMMM YYYY'

ドキュメント

https://day.js.org/docs/en/display/format#list-of-localized-formats

説明

If true, the popover will be initially opened.

非推奨

Use defaultOpen instead

タイプ

boolean

説明

The initial month of the calendar.

タイプ

Date

デフォルト

'new Date()'

説明

If true, the popover will be initially opened.

タイプ

boolean

説明

The initial type of the calendar.

タイプ

"month" | "date" | "year"

説明

The initial value of the calendar.

タイプ

Date[]

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

説明

If true, outside days will be disabled.

タイプ

boolean

デフォルト

false

説明

The animation duration.

タイプ

number | MotionLifecycleProps<number>

説明

The border color when the input is invalid.

タイプ

string

説明

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

タイプ

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

デフォルト

true

説明

Callback function to determine whether the day should be disabled.

タイプ

(date: Date) => boolean

説明

Props for date picker field element.

タイプ

Omit<HTMLUIProps, "children">

説明

Define the first day of the week.

タイプ

"monday" | "sunday"

デフォルト

'monday'

説明

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

タイプ

boolean

デフォルト

true

説明

The border color when the input is focused.

タイプ

string

説明

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

タイプ

UIValue<number>

デフォルト

8

説明

If true, outside days will be hidden.

タイプ

boolean

説明

Define holidays.

タイプ

Date[]

説明

Props for date picker icon element.

タイプ

DatePickerIconProps

説明

The format used for conversion. Check the docs to see the format of possible modifiers you can pass.

タイプ

string

デフォルト

'YYYY/MM/DD'

ドキュメント

https://day.js.org/docs/en/display/format#list-of-localized-formats

説明

Props for date picker input element.

タイプ

HTMLUIProps<"input">

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

If true, display the date picker clear icon.

非推奨

Use clearable instead.

タイプ

boolean

デフォルト

true

説明

If true, the form control will be disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

非推奨

Use invalid instead.

タイプ

boolean

デフォルト

false

説明

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

非推奨

Use lazy instead

タイプ

boolean

デフォルト

false

説明

If true, the popover will be opened.

非推奨

Use open instead

タイプ

boolean

説明

If true, the form control will be readonly.

非推奨

Use readOnly instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

非推奨

Use required instead.

タイプ

boolean

デフォルト

false

説明

If true, keep the placeholder.

タイプ

boolean

デフォルト

false

説明

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

タイプ

boolean

デフォルト

false

説明

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.

タイプ

LazyMode

デフォルト

'unmount'

説明

The locale of the calendar. Check the docs to see the locale of possible modifiers you can pass.

タイプ

string

デフォルト

'en-US'

ドキュメント

https://day.js.org/docs/en/i18n/instance-locale

説明

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

タイプ

boolean

デフォルト

false

説明

The maximum possible date.

タイプ

Date

説明

The maximum selectable value.

タイプ

number

説明

The minimum possible date.

タイプ

Date

説明

The minimum selectable value.

タイプ

number

説明

Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.

タイプ

Partial<Modifier<string, any>>[]

ドキュメント

https://popper.js.org/docs/v2/modifiers/

説明

The month of the calendar.

タイプ

Date

説明

The format used for conversion. Check the docs to see the format of possible modifiers you can pass.

タイプ

string

デフォルト

'MM'

ドキュメント

https://day.js.org/docs/en/display/format#list-of-localized-formats

説明

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

タイプ

[number, number]

説明

The callback invoked when value state changes.

タイプ

(value: Date[]) => void

説明

The callback invoked when month state changes.

タイプ

(value: Date) => void

説明

The callback invoked when type state changes.

タイプ

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

説明

Callback fired when the popover closes.

タイプ

() => void

説明

Callback fired when the popover opens.

タイプ

() => void

説明

If true, the popover will be opened.

タイプ

boolean

説明

The number of delay time to open.

タイプ

number

デフォルト

200

説明

The number of months to paginate.

タイプ

number

デフォルト

1

説明

Function that converts the input value to Date type.

タイプ

(value: string) => Date | undefined

説明

The pattern used to check the input element.

タイプ

RegExp

デフォルト

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

説明

The placement of the popper relative to its reference.

タイプ

UIValue<Placement>

デフォルト

'bottom'

説明

Props to be forwarded to the portal component.

タイプ

Omit<PortalProps, "children">

デフォルト

'{ disabled: true }'

説明

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

タイプ

boolean

デフォルト

true

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

説明

The visual separator between each value.

タイプ

string

デフォルト

','

説明

The size of the MultiDatePicker.

タイプ

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

デフォルト

"md"

説明

The CSS positioning strategy to use.

タイプ

"absolute" | "fixed"

デフォルト

'absolute'

説明

If true, highlight today.

タイプ

boolean

デフォルト

false

説明

The type of the calendar.

タイプ

"month" | "date" | "year"

説明

The value of the calendar.

タイプ

Date[]

説明

The variant of the MultiDatePicker.

タイプ

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

デフォルト

"outline"

説明

The format used for conversion. Check the docs to see the format of possible modifiers you can pass.

タイプ

string

デフォルト

'dd'

ドキュメント

https://day.js.org/docs/en/display/format#list-of-localized-formats

説明

Define weekend days.

タイプ

number[]

デフォルト

'[0, 6]'

説明

If true, display the calendar control buttons.

タイプ

boolean

デフォルト

true

説明

If true, display the calendar header.

タイプ

boolean

デフォルト

true

説明

If true, display the calendar label button.

タイプ

boolean

デフォルト

true

説明

If true, display the calendar weekdays.

タイプ

boolean

デフォルト

true

説明

The format used for conversion. Check the docs to see the format of possible modifiers you can pass.

タイプ

string

デフォルト

'YYYY'

ドキュメント

https://day.js.org/docs/en/display/format#list-of-localized-formats

GitHubでこのページを編集する

前DatePicker 次RangeDatePicker