MonthPicker type prop for multiple dates
Set `type="multiple"` to allow users to pick multiple dates.
dates/month-picker
12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
MonthPicker type prop for date range
Set `type="range"` to allow users to pick a date range.
MonthPicker presets prop
Use the `presets` prop to add custom month presets. Presets are displayed next to the calendar. To use `presets` with `type="range"`, define the value as a tuple of two dates.
MonthPicker defaultDate prop
Use the `defaultDate` prop to set the date value that will be used to determine which year should be displayed initially. For example, to display the 2015 year, set `defaultDate={new Date(2015, 1)}`. If the value is not specified, then `defaultDate` will use `new Date()`. Month, day, minutes and seconds are ignored in the provided date object; only the year is used. If you set the `date` prop, then the `defaultDate` value will be ignored.
MonthPicker getYearControlProps and getMonthControlProps
You can add props to year and month controls with the `getYearControlProps` and `getMonthControlProps` functions. Both functions accept a date as a single argument, and props returned from the function will be added to the year/month control. This can be used to disable a specific control or add styles.
MonthPicker maxLevel prop to disable decade level
To disallow users from going to the decade level, set `maxLevel="year"`.
MonthPicker fullWidth prop
Set the `fullWidth` prop to make the month picker stretch to fill 100% of its parent container width.
MonthPicker yearsListFormat and monthsListFormat props
Use the `yearsListFormat` and `monthsListFormat` props to change the dayjs format of year/month controls.
MonthPicker localization via locale prop
You can specify the locale per component by overriding it, though it is usually better to specify the @mantine/dates package locale in DatesProvider.
MonthPicker withNativeLevelSelect prop
Set the `withNativeLevelSelect` prop to replace the calendar header level button with native `<select>` elements.
MonthPicker keyboard interaction with month controls
When focus is on a month control, the following keyboard events are supported: ArrowRight focuses next non-disabled month, ArrowLeft focuses previous non-disabled month, ArrowDown focuses next non-disabled month in the same column, ArrowUp focuses previous non-disabled month in the same column.
MonthPicker getYearControlProps and getMonthControlProps for aria-label
Use `getYearControlProps` and `getMonthControlProps` to customize the `aria-label` attribute for year and month controls. For example, `getYearControlProps={(date) => ({ 'aria-label': `Select year ${date.getFullYear()}` })}` and `getMonthControlProps={(date) => ({ 'aria-label': `Select month ${date.getFullYear()}/${date.getMonth()}` })}` can be used to set custom aria-label attributes.