v4.2.12

DatePicker

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

Usage

DatePicker component:

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


function Demo() {
  return <DatePicker placeholder="Pick date" label="Event date" required />;
}

DateRangePicker component (supports the same props as DatePicker component):

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


function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([
    new Date(2021, 11, 1),
    new Date(2021, 11, 5),
  ]);


  return (
    <DateRangePicker
      label="Book hotel"
      placeholder="Pick dates range"
      value={value}
      onChange={setValue}
    />
  );
}

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:

import 'dayjs/locale/ru';
import { DatePicker } from '@mantine/dates';


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

Custom day renderer

You can provide your own day renderer function with renderDay prop. For example, it can be used to wrap day with Indicator:

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


function Demo() {
  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      renderDay={(date) => {
        const day = date.getDate();
        return (
          <Indicator size={6} color="red" offset={8} disabled={day !== 16}>
            <div>{day}</div>
          </Indicator>
        );
      }}
    />
  );
}

Level change

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:

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


function Demo() {
  return <DatePicker allowLevelChange={false} placeholder="No level change" label="Event date" />;
}

First day of the week

Change first day of week with firstDayOfWeek prop. It accepts either sunday or monday as values:

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


function Demo() {
  return (
    <DatePicker
      label="Sunday as first day of week"
      placeholder="Pick date"
      firstDayOfWeek="sunday"
    />
  );
}

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:

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


function Demo() {
  return <DatePicker dropdownType="modal" placeholder="Pick date" label="Event date" />;
}

In most cases, you would want to switch to modal when a 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'} />;
}

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:

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


function Demo() {
  return (
    <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()}
    />
  );
}

Allow free input

By setting allowFreeInput prop you stop input from being readonly. With this option user is allowed to type date manually:

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


function Demo() {
  return <DatePicker allowFreeInput placeholder="Pick date" label="Event date" required />;
}

By default, DatePicker will try to parse date using dayjs with given inputFormat, to change that provide dateParser function:

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


function Demo() {
  return (
    <DatePicker allowFreeInput dateParser={(dateString) => new Date(Date.parse(dateString))} />
  );
}

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:

import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);

Exclude dates

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:

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


function Demo() {
  return <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 the day component
  • modifiers – modifiers that are applied to the day component

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';
import { DatePicker } from '@mantine/dates';


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


  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      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 { createStyles } from '@mantine/core';
import { DatePicker } from '@mantine/dates';


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


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


  selected: {
    color: `${theme.white} !important`,
  },
}));




function Demo() {
  const { classes, cx } = useStyles();


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

Format labels

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
import { DatePicker } from '@mantine/dates';


function Demo() {
  return (
    <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:

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


function Demo() {
  return <DatePicker clearable={false} placeholder="Pick date" label="Event date" />;
}

Multiple months

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


function Demo() {
  return (
    <>
      <DatePicker amountOfMonths={2} label="2 months" />
      <DatePicker amountOfMonths={3} label="3 months" />
    </>
  );
}

Input props

Component supports all props from Input and InputWrapper components:

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { DatePicker } from '@mantine/dates';


function Demo() {
  return (
    <DatePicker
      placeholder="Event date"
      label="Pick date"
      required
    />
  );
}

Icon and right section

import { DatePicker } from '@mantine/dates';
import { Calendar } from 'tabler-icons-react';


function Demo() {
  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      icon={<Calendar size={16} />}
    />
  );
}

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

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


function Demo() {
  return <DatePicker disabled />;
}

Dropdown position

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 dropdownPosition prop:

DropdownPosition
import { Autocomplete } from '@mantine/core';


function Demo() {
  return <DatePicker placeholder="Pick date" label="Event date" />;
}

Get input ref

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


function Demo() {
  const ref = useRef<HTMLInputElement>();
  return <DatePicker ref={ref} />;
}
Go back
Calendar – @mantine/dates
Up next
Month – @mantine/dates
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter