| Prop | Default | Type |
|---|---|---|
as | 'div' | AsTag | ComponentThe element or component this component should render as. Can be overwritten by |
asChild | booleanChange the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
calendarLabel | stringThe accessible label for the month picker | |
defaultPlaceholder | DateValueThe default placeholder date | |
defaultValue | DateValueThe default value for the month picker | |
dir | 'ltr' | 'rtl'The reading direction of the calendar when applicable. If omitted, inherits globally from | |
disabled | false | booleanWhether the month picker is disabled |
initialFocus | false | booleanIf true, the month picker will focus the selected month, today, or the first month of the year on mount |
isMonthDisabled | MatcherA function that returns whether or not a month is disabled | |
isMonthUnavailable | MatcherA function that returns whether or not a month is unavailable | |
locale | stringThe locale to use for formatting dates | |
maxValue | DateValueThe maximum date that can be selected | |
minValue | DateValueThe minimum date that can be selected | |
modelValue | DateValue | DateValue[]The controlled checked state of the month picker | |
multiple | false | booleanWhether multiple months can be selected |
nextPage | ((placeholder: DateValue) => DateValue)A function that returns the next page of the month picker. Receives the current placeholder as an argument. | |
placeholder | DateValueThe placeholder date, which is used to determine what year to display when no date is selected | |
preventDeselect | false | booleanWhether or not to prevent the user from deselecting a date without selecting another date first |
prevPage | ((placeholder: DateValue) => DateValue)A function that returns the previous page of the month picker. Receives the current placeholder as an argument. | |
readonly | false | booleanWhether the month picker is readonly |
| Emit | Payload |
|---|---|
update:modelValue | [date: DateValue]Event handler called whenever the model value changes |
update:placeholder | [date: DateValue]Event handler called whenever the placeholder value changes |
| Slots (default) | Payload |
|---|---|
date | DateValueThe current date of the placeholder |
grid | Grid<DateValue>The grid of months |
locale | stringThe month picker locale |
modelValue | DateValue | DateValue[] | undefinedThe current selected value |
| Methods | Type |
|---|---|
isMonthDisabled | MatcherA function that returns whether or not a month is disabled |
isMonthUnavailable | MatcherA function that returns whether or not a month is unavailable |
