Date Picker - Mantine

import { DatePickerDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.DatePicker);

Usage

Allow deselect

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.

Multiple dates

Set type="multiple" to allow users to pick multiple dates:

Dates range

Set type="range" to allow users to pick a date range:

Single date in 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.

Presets

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:

Default date

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.

Controlled date

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:

Default level

Set the defaultLevel prop to configure the initial level that will be displayed:

Hide outside dates

Set the hideOutsideDates prop to remove all dates that do not belong to the current month:

Display week numbers

Set the withWeekNumbers prop to display week numbers:

First day of week

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.

Hide weekdays

Set the hideWeekdays prop to hide weekday names:

Weekend days

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.

Render day function

You can customize day rendering with the renderDay prop. For example, it can be used to add Indicator to certain days.

Min and max date

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.

Change header controls order

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.

Add props to day, year and month control

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:

Exclude dates

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:

Number of columns

Set the numberOfColumns prop to define the number of pickers that will be rendered side by side:

Max level

Full width

Set the fullWidth prop to make the date picker stretch to fill 100% of its parent container width:

Size

Change year and months controls format

Use the yearsListFormat and monthsListFormat props to change the dayjs format of year/month controls:

Change label format

Use the decadeLabelFormat, yearLabelFormat and monthLabelFormat props to change the dayjs format of the decade/year label:

Localization

Usually it is better to specify the @mantine/dates package locale in DatesProvider, but you can also override the locale per component:

Accessibility

Aria labels

Set the ariaLabels prop to specify aria-label attributes for next/previous controls:

tsx

import { DatePicker } from '@mantine/dates';

function Demo() {
  return (
    <DatePicker
      ariaLabels={{
        nextDecade: 'Next decade',
        previousDecade: 'Previous decade',
        nextYear: 'Next year',
        previousYear: 'Previous year',
        nextMonth: 'Next month',
        previousMonth: 'Previous month',
        yearLevelControl: 'Change to decade view',
        monthLevelControl: 'Change to year view',
      }}
    />
  );
}

Year/month control aria-label

Use getYearControlProps/getMonthControlProps/getDayProps to customize the aria-label attribute:

tsx

import { DatePicker } from '@mantine/dates';

function Demo() {
  return (
    <DatePicker
      getDayProps={(date) => ({
        'aria-label': `Select date ${
          date.getMonth() + 1
        }/${date.getDate()}/${date.getFullYear()}`,
      })}
      getYearControlProps={(date) => ({
        'aria-label': `Select year ${date.getFullYear()}`,
      })}
      getMonthControlProps={(date) => ({
        'aria-label': `Select month ${date.getFullYear()}/${date.getMonth()}`,
      })}
    />
  );
}

Keyboard interactions

Note that the following events will only trigger if focus is on a date control.