v2.5.1
Discord
Source code

DatePicker

Capture date input from user
Import
Source
View source code
Docs
Edit this page
Package
@mantine/dates

Usage

<DatePicker placeholder="Pick date" label="Event date" required />

Controlled

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


function Demo() {
  const [value, onChange] = useState(new Date());
  return <DatePicker value={value} onChange={onChange} />;
}

Localization

All @mantine/dates components are built with dayjs library. Default locale is en, to change this follow dayjs localization guide:

// First import locale data
import 'dayjs/locale/ru';

Then set locale prop in component:

<DatePicker
  locale="ru"
  placeholder="Выберите дату"
  label="Дата события"
  defaultValue={new Date()}
/>

Open calendal 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:

<DatePicker dropdownType="modal" placeholder="Pick date" label="Event date" />

In most cases you would want to switch to modal when certain breakpoint is reached. To implement this use use-media-query hook:

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


function Demo() {
  const isMobile = useMediaQuery('(max-width: 755px)');
  return <DatePicker dropdownType={isMobile ? 'modal' : 'popover'} />;
}

Year and month picker

You can replace calendar label with year and month selects. To use this option provide props:

  • withSelect – replace label with month and year select
  • yearsRange – years range that should be used to generate years select options
<DatePicker
  placeholder="Pick date"
  label="Event date"
  withSelect
  yearsRange={{ from: 2020, to: 2025 }}
  minDate={new Date(2020, 0, 1)}
  maxDate={new Date(2025, 11, 31)}
/>

Min and max dates

Set minDate and maxDate props to define minimum and maximum possible dates. Dates which are not included in available interval will be disabled:

<DatePicker
  placeholder="Pick date"
  label="Event date"
  minDate={dayjs(new Date()).startOf('month').add(5, 'days').toDate()}
  maxDate={dayjs(new Date()).endOf('month').subtract(5, 'days').toDate()}
/>

Exclude dates

To exclude dates set excludeDates 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:

<DatePicker
  excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6}
/>

Add styles to days

You can apply styles to any day with dayStyle or dayClassName callbacks. Both functions receive two arguments:

  • date – date object which is used to render day
  • modifiers – modifiers that are applied to day

Modifiers

interface DayModifiers {
  /** Is date selected and is first or last in range? */
  selectedInRange: boolean;


  /** Is date equal to value? */
  selected: boolean;


  /** Based on minDate, maxDate, excludeDate and disableOutsideEvents props */
  disabled: boolean;


  /** Is date is range? */
  inRange: boolean;


  /** Is date first or last in given range? */
  firstInRange: boolean;
  lastInRange: boolean;


  /** Is date Saturday or Sunday? */
  weekend: boolean;


  /** Is date outside of given month? */
  outside: boolean;
}

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):

import { useMantineTheme } from '@mantine/core';


function Demo() {
  const theme = useMantineTheme();


  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      initialMonth={new Date(2021, 7)}
      dayStyle={(date) =>
        date.getDay() === 5 && date.getDate() === 13
          ? { backgroundColor: theme.colors.red[9], color: theme.white }
          : null
      }
    />
  );
}

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):

import cx from 'clsx';
import { createUseStyles } from 'react-jss';
import { theming } from '@mantine/core';
import { DatePicker } from '@mantine/dates';


const useStyles = createUseStyles(
  (theme) => ({
    outside: {
      opacity: 0,
    },


    weekend: {
      color: `${theme.colors.blue[6]} !important`,
    },
  }),
  { theming }
);




function Demo() {
  const classes = useStyles();


  return (
    <DatePicker
      disableOutsideEvents
      placeholder="Pick date"
      label="Event date"
      initialMonth={new Date(2021, 7)}
      dayClassName={(date, modifiers) =>
        cx({ [classes.outside]: modifiers.outside, [classes.weekend]: modifiers.weekend })
      }
    />
  );
}

Format labels

By default DatePicker will display dates in human readable format. To change that you can provide dayjs format string to the following props:

  • inputFormat – set input value date format
  • labelFormat – set calendar month label format
<DatePicker
  placeholder="Pick date"
  label="Event date"
  inputFormat="MM/DD/YYYY"
  labelFormat="MM/YYYY"
  defaultValue={new Date()}
/>

Disallow clear

By default date picker can be cleared, to disable this, set clearable prop to false:

<DatePicker placeholder="Pick date" label="Event date" clearable={false} />

Input props

Component supports all props from Input and InputWrapper components:

Radius
Size
<DatePicker
  placeholder="Event date"
  label="Pick date"
  required
/>

Icon and right section

You can use any React node as icon:

<DatePicker
  placeholder="Pick date"
  label="Event date"
  icon={<CalendarIcon />}
/>

Invalid state and error

You must be at least 18 to register
// Error as boolean – red border color
<DatePicker error />


// Error as React node – red border color and message below input
<DatePicker error="You must be at least 18 to register" />

Disabled state

<DatePicker disabled />

Get element ref

You can get input ref with elementRef prop:

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


function Demo() {
  const ref = useRef(null);
  return <DatePicker elementRef={ref} />;
}

Server side rendering

Component uses use-id hook to generate unique ids and aria- attributes, provide static id prop to prevent props mismatch:

<DatePicker /> // -> random id generated both on client and server, props mismatch warning
<DatePicker id="my-date-picker" /> // -> id is static, no mismatches

Accessibility and usability

To make all component controls visible to screen reader set following props:

// When withSelect prop set to false
<DatePicker
  withSelect={false}
  nextMonthLabel="Next month" // -> aria-label for button that switches to next month
  previousMonthLabel="Previous month" // -> aria-label for button that switches to previous month
  clearButtonLabel="Clear field" // -> aria-label for clear button, use when clearable prop is true
/>


// When withSelect prop set to true
<DatePicker
  withSelect
  nextMonthLabel="Next month" // -> aria-label for button that switches to next month
  previousMonthLabel="Previous month" // -> aria-label for button that switches to previous month
  yearLabel="Select year" // -> year select aria-label
  monthLabel="Select month" // -> month select aria-label
/>
Build fully functional accessible web applications with ease
Project
Contribute to MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter