Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.3

MonthPicker

MonthPicker is a component used for users to select a month.

Source@yamada-ui/calendar

Import

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

Usage

Editable example

<MonthPicker placeholder="basic" />
Copied!

Change Variant

Editable example

<VStack>
  <MonthPicker variant="outline" placeholder="outline" />
  <MonthPicker variant="filled" placeholder="filled" />
  <MonthPicker variant="flushed" placeholder="flushed" />
  <MonthPicker variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

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

Editable example

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

Change Size

Editable example

<VStack>
  <MonthPicker placeholder="extra small size" size="xs" />
  <MonthPicker placeholder="small size" size="sm" />
  <MonthPicker placeholder="medium size" size="md" />
  <MonthPicker placeholder="large size" size="lg" />
</VStack>
Copied!

To change the size of the calendar, set the calendarSize.

Editable example

<VStack>
  <MonthPicker placeholder="small size" calendarSize="sm" />
  <MonthPicker placeholder="medium size" calendarSize="md" />
  <MonthPicker placeholder="large size" calendarSize="lg" />
</VStack>
Copied!

Change Color Scheme

Editable example

<VStack>
  <MonthPicker
    calendarVariant="solid"
    calendarColorScheme="secondary"
    today
    defaultValue={new Date()}
  />
  <MonthPicker
    calendarVariant="subtle"
    calendarColorScheme="green"
    today
    defaultValue={new Date()}
  />
</VStack>
Copied!

Set Default Value

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

Editable example

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

Change Default Type

To change the default type, set defaultType to month or year. By default, month is set.

Editable example

<VStack>
  <MonthPicker placeholder="month" defaultType="month" />
  <MonthPicker placeholder="year" defaultType="year" />
</VStack>
Copied!

Set Default Month

To set a default month, set a Date to defaultMonth.

Editable example

<MonthPicker placeholder="YYYY/MM" defaultMonth={new Date("1993-08")} />
Copied!

Set Pattern

To set a pattern, set a regular expression to pattern. By default, '/[^0-9\-\/]/g' is set.

Editable example

<MonthPicker
  placeholder="MMM YYYY"
  inputFormat="MMM YYYY"
  pattern={/[^\w, ]/g}
  defaultValue={new Date()}
/>
Copied!

Date Parsing

You can customize the way dates are parsed.

Editable example

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

Set Minimum and Maximum Month

To set the selectable minimum and maximum month, set a Date to minDate and maxDate.

Editable example

<MonthPicker
  placeholder="YYYY/MM"
  defaultValue={new Date(1997, 0)}
  minDate={new Date(1993, 8)}
  maxDate={new Date(2000, 10)}
/>
Copied!

Set Locale

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

import "dayjs/locale/ja"
Copied!

Editable example

<MonthPicker locale="ja" placeholder="YYYY/MM" />
Copied!

Change Year-Month Format

To change the format of year and month, set a string to inputFormat or yearFormat.

Editable example

<VStack>
  <MonthPicker placeholder="YYYY-MM" inputFormat="YYYY-MM" />
  <MonthPicker
    placeholder="YYYY/MM"
    locale="ja"
    defaultType="month"
    yearFormat="YYYY年"
  />
</VStack>
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

<MonthPicker placeholder="YYYY/MM" 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

<MonthPicker placeholder="YYYY/MM" closeOnBlur={false} />
Copied!

Disable Clearing

To disable clearing, set isClearable to false.

Editable example

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

Disallow Input

To disallow input, set allowInput to false.

Editable example

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

Change Placement

To change the placement, set placement to top, left-start, etc. By default, bottom is set.

Editable example

<MonthPicker placeholder="YYYY/MM" 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>
  <MonthPicker placeholder="YYYY/MM" gutter={32} />
  <MonthPicker placeholder="YYYY/MM" 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>
  <MonthPicker focusBorderColor="green.500" placeholder="custom border color" />
  <MonthPicker
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<VStack>
  <MonthPicker isDisabled variant="outline" placeholder="outline" />
  <MonthPicker isDisabled variant="filled" placeholder="filled" />
  <MonthPicker isDisabled variant="flushed" placeholder="flushed" />
</VStack>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<VStack>
  <MonthPicker isReadOnly variant="outline" placeholder="outline" />
  <MonthPicker isReadOnly variant="filled" placeholder="filled" />
  <MonthPicker isReadOnly variant="flushed" placeholder="flushed" />
</VStack>
Copied!

Make Input Invalid

To make input invalid, set isInvalid to true.

Editable example

<VStack>
  <MonthPicker isInvalid variant="outline" placeholder="outline" />
  <MonthPicker isInvalid variant="filled" placeholder="filled" />
  <MonthPicker isInvalid variant="flushed" placeholder="flushed" />
</VStack>
Copied!

Customize Icon

To customize the icon, set props to iconProps.

Editable example

<VStack>
  <MonthPicker placeholder="YYYY/MM" iconProps={{ color: "primary" }} />
  <MonthPicker placeholder="YYYY/MM" 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>
  <MonthPicker placeholder="MMM YYYY">
    <VStack mt="sm">
      <Button>Submit</Button>
    </VStack>
  </MonthPicker>

  <MonthPicker placeholder="MMM YYYY" closeOnSelect={false}>
    {({ value, onClose }) => (
      <VStack mt="sm">
        <Button isDisabled={!value} onClick={onClose}>
          Submit
          {value
            ? ` ${
                value.getFullYear() +
                "/" +
                String(value.getMonth() + 1).padStart(2, "0")
              }`
            : ""}
        </Button>
      </VStack>
    )}
  </MonthPicker>
</VStack>
Copied!

Control

Editable example

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

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

Editable example

const [type, onChangeType] = useState<MonthPickerProps["type"]>("month")

return (
  <MonthPicker placeholder="YYYY/MM" type={type} onChangeType={onChangeType} />
)
Copied!

Editable example

const [month, onChangeMonth] = useState<Date>(new Date("1993-08-18"))

return (
  <MonthPicker
    placeholder="YYYY/MM"
    month={month}
    onChangeMonth={onChangeMonth}
  />
)
Copied!

Use React Hook Form

Editable example

type Data = { monthPicker: 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.monthPicker}
      label="Birthday"
      errorMessage={errors.monthPicker ? errors.monthPicker.message : undefined}
    >
      <Controller
        name="monthPicker"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => <MonthPicker placeholder="YYYY/MM" {...field} />}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousTimePickerNextYearPicker