MonthPicker
MonthPicker is a component used for users to select a month.
Import
@yamada-ui/calendar is not included in @yamada-ui/react, so it needs to be installed separately.
import { MonthPicker } from "@yamada-ui/calendar"
Usage
Editable example
<MonthPicker placeholder="basic" />
Change Variant
Editable example
<VStack> <For each={["outline", "filled", "flushed", "unstyled"]}> {(variant, index) => ( <MonthPicker key={index} variant={variant} placeholder={variant} /> )} </For> </VStack>
To change the variant of the calendar, set the variant.
Editable example
<VStack> <MonthPicker placeholder="solid" calendarVariant="solid" /> <MonthPicker placeholder="subtle" calendarVariant="subtle" /> </VStack>
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>
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>
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>
Set Default Value
To set a default value, set a Date to defaultValue.
Editable example
<MonthPicker defaultValue={new Date()} placeholder="YYYY/MM" />
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>
Set Default Month
To set a default month, set a Date to defaultMonth.
Editable example
<MonthPicker placeholder="YYYY/MM" defaultMonth={new Date("1993-08")} />
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()} />
Date Parsing
You can customize the way dates are parsed.
Editable example
<MonthPicker placeholder="YYYY/MM" inputFormat="YYYY/MM" parseDate={(value) => new Date(value)} />
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)} />
Set Locale
To set the locale, import the data and set the target locale to locale.
import "dayjs/locale/ja"
Editable example
<MonthPicker locale="ja" placeholder="YYYY/MM" />
For locales, please check here.
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>
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
<MonthPicker placeholder="YYYY/MM" 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
<MonthPicker placeholder="YYYY/MM" closeOnBlur={false} />
Disable Clearing
To disable clearing, set isClearable to false.
Editable example
<MonthPicker placeholder="YYYY/MM" isClearable={false} />
Disallow Input
To disallow input, set allowInput to false.
Editable example
<MonthPicker placeholder="YYYY/MM" allowInput={false} />
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" />
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>
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>
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>
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>
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>
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: <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> <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>
Control
Editable example
const [value, onChange] = useState<Date | null>(new Date()) return <MonthPicker placeholder="YYYY/MM" value={value} onChange={onChange} />
Editable example
const [type, onChangeType] = useState<MonthPickerProps["type"]>("month") return ( <MonthPicker placeholder="YYYY/MM" type={type} onChangeType={onChangeType} /> )
Editable example
const [month, onChangeMonth] = useState<Date>(new Date("1993-08-18")) return ( <MonthPicker placeholder="YYYY/MM" month={month} onChangeMonth={onChangeMonth} /> )
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> )
Edit this page on GitHub