YearPicker
YearPicker
is a component used for users to select a year.
Import
@yamada-ui/calendar
is not included in @yamada-ui/react
, so it needs to be installed separately.
import { YearPicker } from "@yamada-ui/calendar"
Usage
Editable example
<YearPicker placeholder="basic" />
Change Variant
Editable example
<VStack> <YearPicker variant="outline" placeholder="outline" /> <YearPicker variant="filled" placeholder="filled" /> <YearPicker variant="flushed" placeholder="flushed" /> <YearPicker variant="unstyled" placeholder="unstyled" /> </VStack>
To change the variant of the calendar, set the variant
.
Editable example
<VStack> <YearPicker placeholder="solid" calendarVariant="solid" /> <YearPicker placeholder="subtle" calendarVariant="subtle" /> </VStack>
Change Size
Editable example
<VStack> <YearPicker placeholder="extra small size" size="xs" /> <YearPicker placeholder="small size" size="sm" /> <YearPicker placeholder="medium size" size="md" /> <YearPicker placeholder="large size" size="lg" /> </VStack>
To change the size of the calendar, set the calendarSize
.
Editable example
<VStack> <YearPicker placeholder="small size" calendarSize="sm" /> <YearPicker placeholder="medium size" calendarSize="md" /> <YearPicker placeholder="large size" calendarSize="lg" /> </VStack>
Change Color Scheme
Editable example
<VStack> <YearPicker calendarVariant="solid" calendarColorScheme="secondary" today defaultValue={new Date(new Date().setDate(1))} /> <YearPicker calendarVariant="subtle" calendarColorScheme="green" today defaultValue={new Date(new Date().setDate(1))} /> </VStack>
Set Default Value
To set a default value, set a Date
to defaultValue
.
Editable example
<YearPicker defaultValue={new Date()} placeholder="YYYY" />
Set Pattern
To set a pattern, set a regular expression to pattern
. By default, '/[^0-9\-\/]/g'
is set.
Editable example
<YearPicker pattern={/[^\w, ]/g} defaultValue={new Date()} />
Date Parsing
You can customize the way dates are parsed.
Editable example
<YearPicker placeholder="YYYY" parseDate={(value) => new Date(value)} />
Set Minimum and Maximum Year
To set the selectable minimum and maximum year, set a Date
to minDate
and maxDate
.
Editable example
<YearPicker placeholder="YYYY" defaultValue={new Date(1997, 0)} minDate={new Date(1993, 0)} maxDate={new Date(2000, 0)} />
Set Locale
To set the locale, import the data and set the target locale to locale
.
import "dayjs/locale/ja"
Editable example
<YearPicker locale="ja" placeholder="YYYY" />
For locales, please check here.
Change Year Format
To change the format of the year, set a string to inputFormat
or yearFormat
.
Editable example
<YearPicker placeholder="YY" inputFormat="YY" yearFormat="YY" />
For formats, please check here.
Do Not Close Calendar on Selection
By default, the calendar closes automatically upon selection. To prevent the calendar from closing on select, set closeOnSelect
to false
.
Editable example
<YearPicker placeholder="YYYY" closeOnSelect={false} />
Do Not Close Calendar on Blur
By default, the calendar closes automatically on blur. To prevent the calendar from closing on blur, set closeOnBlur
to false
.
Editable example
<YearPicker placeholder="YYYY" closeOnBlur={false} />
Disable Clearing
To disable clearing, set isClearable
to false
.
Editable example
<YearPicker placeholder="YYYY" isClearable={false} />
Disable Input
To disallow input, set allowInput
to false
.
Editable example
<YearPicker placeholder="YYYY" allowInput={false} />
Change Placement
To change the placement, set placement
to top
, left-start
, etc. By default, bottom
is set.
Editable example
<YearPicker placeholder="YYYY" placement="bottom-end" />
Change Offset
Depending on the size of the element or the situation, you may want to change the position of the tooltip. In that case, adjust the position with gutter
or offset
.
gutter
allows you to set the difference with simple elements, and offset
allows you to set [horizontal, vertical]
.
Editable example
<VStack> <YearPicker placeholder="YYYY" gutter={32} /> <YearPicker placeholder="YYYY" offset={[16, 16]} /> </VStack>
Change Border Color
To change the color of the border, set a color to focusBorderColor
or errorBorderColor
.
Editable example
<VStack> <YearPicker focusBorderColor="green.500" placeholder="custom border color" /> <YearPicker isInvalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
Disable
To disable, set isDisabled
to true
.
Editable example
<VStack> <YearPicker isDisabled variant="outline" placeholder="outline" /> <YearPicker isDisabled variant="filled" placeholder="filled" /> <YearPicker isDisabled variant="flushed" placeholder="flushed" /> </VStack>
Make Read-Only
To make read-only, set isReadOnly
to true
.
Editable example
<VStack> <YearPicker isReadOnly variant="outline" placeholder="outline" /> <YearPicker isReadOnly variant="filled" placeholder="filled" /> <YearPicker isReadOnly variant="flushed" placeholder="flushed" /> </VStack>
Make Input Invalid
To make the input invalid, set isInvalid
to true
.
Editable example
<VStack> <YearPicker isInvalid variant="outline" placeholder="outline" /> <YearPicker isInvalid variant="filled" placeholder="filled" /> <YearPicker isInvalid variant="flushed" placeholder="flushed" /> </VStack>
Customize Icon
To customize the icon, set props
to iconProps
.
Editable example
<VStack> <YearPicker placeholder="YYYY" iconProps={{ color: "primary" }} /> <YearPicker placeholder="YYYY" iconProps={{ children: <GhostIcon /> }} /> </VStack>
Add elements to a dropdown
To add elements to a dropdown, set the elements to the children
property.
The children
are provided with value
and onClose
methods, which can be used to access the internal state.
Editable example
<VStack> <YearPicker placeholder="YYYY"> <VStack mt="sm"> <Button>Submit</Button> </VStack> </YearPicker> <YearPicker placeholder="YYYY" closeOnSelect={false}> {({ value, onClose }) => ( <VStack mt="sm"> <Button isDisabled={!value} onClick={onClose}> Submit {value ? ` ${value.getFullYear()}` : ""} </Button> </VStack> )} </YearPicker> </VStack>
Control
Editable example
const [value, onChange] = useState<Date | null>(new Date()) return <YearPicker placeholder="YYYY" value={value} onChange={onChange} />
Use React Hook Form
Editable example
type Data = { yearPicker: Date | null } const { control, handleSubmit, watch, formState: { errors }, } = useForm<Data>() const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data) console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={!!errors.yearPicker} label="Birthday" errorMessage={errors.yearPicker ? errors.yearPicker.message : undefined} > <Controller name="yearPicker" control={control} rules={{ required: { value: true, message: "This is required." } }} render={({ field }) => <YearPicker placeholder="YYYY" {...field} />} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub