Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.0

YearPicker

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

Source@yamada-ui/calendar

Import

import { YearPicker } from "@yamada-ui/calendar"
Copied!

Usage

Editable example

<YearPicker placeholder="basic" />
Copied!

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

To change the variant of the calendar, set the variant.

Editable example

<VStack>
  <YearPicker placeholder="solid" calendarVariant="solid" />
  <YearPicker placeholder="subtle" calendarVariant="subtle" />
</VStack>
Copied!

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

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

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

Set Default Value

To set a default value, set a Date to defaultValue.

Editable example

<YearPicker defaultValue={new Date()} placeholder="YYYY" />
Copied!

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()} />
Copied!

Date Parsing

You can customize the way dates are parsed.

Editable example

<YearPicker placeholder="YYYY" parseDate={(value) => new Date(value)} />
Copied!

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)}
/>
Copied!

Set Locale

To set the locale, import the data and set the target locale to locale.

import "dayjs/locale/ja"
Copied!

Editable example

<YearPicker locale="ja" placeholder="YYYY" />
Copied!

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" />
Copied!

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} />
Copied!

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} />
Copied!

Disable Clearing

To disable clearing, set isClearable to false.

Editable example

<YearPicker placeholder="YYYY" isClearable={false} />
Copied!

Disable Input

To disallow input, set allowInput to false.

Editable example

<YearPicker placeholder="YYYY" allowInput={false} />
Copied!

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" />
Copied!

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

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

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

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

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

Customize Icon

To customize the icon, set props to iconProps.

Editable example

<VStack>
  <YearPicker placeholder="YYYY" iconProps={{ color: "primary" }} />
  <YearPicker placeholder="YYYY" iconProps={{ children: <Ghost /> }} />
</VStack>
Copied!

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

Control

Editable example

const [value, onChange] = useState<Date | null>(new Date())

return <YearPicker placeholder="YYYY" value={value} onChange={onChange} />
Copied!

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>
)
Copied!

Edit this page on GitHub

PreviousToggleNextData Display