DatePicker

Capture date input from user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

Usage

Event date *

<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()}
/>

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:

Event date

<DatePicker allowLevelChange={false} />

First day of the week

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

Sunday as first day of week

<DatePicker firstDayOfWeek="sunday" />

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:

Event date

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

Event date

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

Event date *

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

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

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

dateParser function should always return Date object. If parsed date is invalid when input is blurred value will be restored to last valid value.

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:

Event date

<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;
}

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

Event date

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

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

Event date

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

Event date

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

Event date

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

Multiple months

2 months

3 months

<DatePicker amountOfMonths={2} label="2 months" />
<DatePicker amountOfMonths={3} label="3 months" />

Input props

Component supports all props from Input and InputWrapper components:

Pick date *

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

Required

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

Icon and right section

Event date

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

Invalid state and error

Your birthday

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

Disabled without value

Disabled with value

<DatePicker disabled />

Get input ref

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

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

Go back

Calendar – @mantine/dates

Up next

DateRangePicker – @mantine/dates

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub 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