DateRangePicker component (supports the same props as DatePicker component):
All @mantine/dates components are built with dayjs library.
Default locale is
en, to change this follow dayjs localization guide:
locale prop in component:
Custom day renderer
You can provide your own day renderer function with
For example, it can be used to wrap day with Indicator:
DatePicker supports three levels: date, month and year. User can access next level by clicking label between next/previous controls.
To disable that, set
allowLevelChange prop to false:
First day of the week
Change first day of week with
firstDayOfWeek prop. It accepts either
monday as values:
Open calendar within modal
You can change the way calendar pop up on the page.
Default variant is
popover, set it to
modal to display calendar in modal:
In most cases, you would want to switch to modal when a certain breakpoint is reached. To implement this use use-media-query hook:
Min and max dates
maxDate props to define minimum and maximum possible dates.
Dates which are not included in available interval will be disabled:
Allow free input
allowFreeInput prop you stop input from being readonly.
With this option user is allowed to type date manually:
By default, DatePicker will try to parse date using dayjs with given
to change that provide
dateParser function should always return Date object.
If parsed date is invalid when input is blurred value will be restored to last valid value.
Note that if you use the default dayjs parser, you will need to import and configure the
customParseFormat dayjs plugin:
To exclude dates set
excludeDate prop with function that receives date as an argument and returns
true if date should be disabled. For example, to disable weekends, check if date day is 0 or 6:
Add styles to days
You can apply styles to any day with
Both functions receive two arguments:
date– date object which is used to render the day component
modifiers– modifiers that are applied to the day component
Styles based on date
dayStyle callback allows you to add inline styles to days. Function must return either styles object or null.
In this example, we will add red background to each Friday 13th based on date (first argument):
Styles based on modifiers
dayClassName callback allows you to add className to days. Function must return either className string or null.
In this example, we will hide all outside dates and change color of weekends based on modifiers (second argument):
By default, DatePicker will display dates in human readable format. To change that provide dayjs format string to the following props:
inputFormat– input value date format
labelFormat– calendar month label format
By default, date picker can be cleared, to disable this, set
clearable prop to
Component supports all props from Input and InputWrapper components:
Icon and right section
Invalid state and error
By default, dropdown is placed below the input and when there is not enough space, it flips to be above the input.
To change this behavior, set