YearPicker

YearPicker is a component used for users to select a year.

Source @yamada-ui/calendar

Props

YearPickerProps

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 animation of the popover.

Type

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

ThemeColorScheme

Description

Props for calendar component.

Type

CalendarBaseProps

Description

Size for the calendar component.

Type

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

Description

Variant for the calendar component.

Type

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

Description

If true, display the year picker clear icon.

Type

boolean

Default

true

Description

Props for year picker clear icon element.

Type

DatePickerIconProps

Description

The number of delay time to close.

Type

number

Default

200

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

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

Description

Props for year picker container element.

Type

Omit<HTMLUIProps, "children">

Description

Props for year picker container element.

Type

Omit<MotionProps, "children">

Description

If true, the popover will be initially opened.

Deprecated

Use defaultOpen instead

Type

boolean

Description

If true, the popover will be initially opened.

Type

boolean

Description

The initial value of the calendar.

Type

Date

Description

If true, the form control will be disabled.

Type

boolean

Default

false

Description

The animation duration.

Type

number | MotionLifecycleProps<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
| { resize?: boolean | undefined; scroll?: boolean | undefined }

Default

true

Description

Props for year picker field element.

Type

Omit<DatePickerFieldProps, "children" | "inputProps">

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

Props for year 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-formats

Description

Props for year picker input element.

Type

UIProps &
Omit<HTMLProps<"input">, keyof UIProps> &
RefAttributes<HTMLInputElement>

Description

If true, the form control will be invalid.

Type

boolean

Default

false

Description

If true, display the year picker clear icon.

Deprecated

Use clearable instead.

Type

boolean

Default

true

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

Description

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

Deprecated

Use lazy instead

Type

boolean

Default

false

Description

If true, the popover will be opened.

Deprecated

Use open instead

Type

boolean

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

Description

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

Type

boolean

Default

false

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'

Description

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

Type

string

Default

'en-US'

Docs

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

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

Description

The maximum possible date.

Type

Date

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

Callback fired when the popover closes.

Type

() => void

Description

Callback fired when the popover opens.

Type

() => void

Description

If true, the popover will be opened.

Type

boolean

Description

The number of delay time to open.

Type

number

Default

200

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

'{ disabled: 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

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 size of the YearPicker.

Type

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

Default

"md"

Description

The CSS positioning strategy to use.

Type

"absolute" | "fixed"

Default

'absolute'

Description

The value of the calendar.

Type

Date

Description

The variant of the YearPicker.

Type

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

Default

"outline"

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

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

Edit this page on GitHub

PreviousMonthPicker NextColorPicker