Inline date, multiple dates and dates range picker
Set allowDeselect to allow users to deselect the currently selected date by clicking on it. allowDeselect is disregarded when the type prop is range or multiple . When a date is deselected, onChange is called with null .
Set type="multiple" to allow users to pick multiple dates:
Set type="range" to allow users to pick a date range:
By default, it is not allowed to select a single date as a range – when the user clicks the same date a second time, it is deselected. To change this behavior, set the allowSingleDateInRange prop. allowSingleDateInRange is ignored when the type prop is not range .
Use the presets prop to add custom date presets. Presets are displayed next to the calendar:
To use presets with type="range" , define the value as a tuple of two dates:
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 February month, set defaultDate={new Date(2015, 1)} . If the value is not specified, then defaultDate will use new Date() . Day, minutes and seconds are ignored in the provided date object, only year and month data is used – you can specify any date value.
Note that if you set the date prop, then the defaultDate value will be ignored.
Set the date and onDateChange props to make the currently displayed month, year and decade controlled. By doing so, you can customize the date picking experience. For example, when the user selects the first date in a range, you can add one month to the current date value:
Set the defaultLevel prop to configure the initial level that will be displayed:
Set the hideOutsideDates prop to remove all dates that do not belong to the current month:
Set the withWeekNumbers prop to display week numbers:
Set the firstDayOfWeek prop to configure the first day of the week. The prop accepts a number from 0 to 6, where 0 is Sunday and 6 is Saturday. The default value is 1 – Monday. You can also configure this option for all components with DatesProvider .
Set the hideWeekdays prop to hide weekday names:
Use the weekendDays prop to configure weekend days. The prop accepts an array of numbers from 0 to 6, where 0 is Sunday and 6 is Saturday. The default value is [0, 6] – Saturday and Sunday. You can also configure this option for all components with DatesProvider .
You can customize day rendering with the renderDay prop. For example, it can be used to add Indicator to certain days.
Set the minDate and maxDate props to define minimum and maximum dates. If the previous/next page is not available, then the corresponding control will be disabled.
Use the headerControlsOrder prop to change the order of header controls. The prop accepts an array of 'next' | 'previous' | 'level' . Note that each control can be used only once in the array.
You can add props to year, month and day controls with the getYearControlProps , getMonthControlProps and getDayProps functions. All functions accept a date as a single argument, and props returned from the function will be added to the year/month/day control. For example, it can be used to disable a specific control or add styles:
To disable specific dates, use the excludeDate prop. It accepts a function that takes a date as an argument and returns a boolean value – if true is returned, the date will be disabled. Example of disabling all dates that are not Fridays:
Set the numberOfColumns prop to define the number of pickers that will be rendered side by side:
Demo is not available on small screens. Make your screen larger to see the demo.
Set the fullWidth prop to make the date picker stretch to fill 100% of its parent container width:
Use the yearsListFormat and monthsListFormat props to change the dayjs format of year/month controls:
Use the decadeLabelFormat , yearLabelFormat and monthLabelFormat props to change the dayjs format of the decade/year label:
Usually it is better to specify the @mantine/dates package locale in DatesProvider , but you can also override the locale per component:
Set the withNativeLevelSelect prop to replace the calendar header level button with native <select> elements. At the month level, two selects are rendered for month and year. At the year level, one select is rendered for year.
Set the ariaLabels prop to specify aria-label attributes for next/previous controls:
Use getYearControlProps / getMonthControlProps / getDayProps to customize the aria-label attribute:
Note that the following events will only trigger if focus is on a date control.