Getting started

Installation

yarn add @mantine/dates dayjs

After installation import package styles at the root of your application:

import '@mantine/dates/styles.css';

Usage

After installing @mantine/dates package and importing styles, you can use all components from it:

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

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DatePickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
    />
  );
}

dayjs

@mantine/dates components use dayjs under the hood for date manipulations and formatting. dayjs is a required dependency – you cannot change it to another date library. If you want to use a different date library in your application, you will need to install it separately.

Custom parse format

Some components like DateInput require custom parse format dayjs plugin. You need to extend dayjs with this plugin before using components that require it. Note that it is usually done once in your application root file, so you don't need to do it every time you use component.

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);