Mantine Dates

Installation

Package depends on:

• react
• react-dom
• dayjs
• @mantine/hooks
• @mantine/core

Install with npm:

npm install dayjs @mantine/core @mantine/hooks @mantine/dates

Install with yarn:

yarn add dayjs @mantine/core @mantine/hooks @mantine/dates

Localization

Mantine dates use dayjs library for localization. Follow example to load required locales in your application:

// Import German language
import 'dayjs/locale/de';

Then when you use components provide imported locale:

import { DatePicker, Calendar, Month } from '@mantine/dates';

function Demo() {
  return (
    <>
      <DatePicker locale="de" />
      <Calendar locale="de" />
      <Month locale="de" />
    </>
  );
}

Components

DatePicker

DatePicker allows you to capture dates without free user input. Component supports the same props as any other input from @mantine/core library and can be used in forms:

DateRangePicker

DateRangePicker allows you to capture dates range from user:

TimeInput

TimeInput component allows to capture time input from user:

Calendar

Calendar component allows you to capture date input fom user or display events:

RangeCalendar

Capture dates range input with RangeCalendar component:

Month

Month component displays given month, it is the most basic component which is used in all other components. You can use it to create your own date pickers and calendars if Mantine components do not fit your requirements:

Utility functions

Apart from components @mantine/dates package also exports several utility function to help you build your own dates related components

get-month-days

Returns an array of weeks of current month, used to build Month component

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

getMonthDays(new Date()); // -> [[7xDate objects] x amount of weeks in current month]

get-months-names

Returns full months names for given locale, used in Calendar component to render month select

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

getMonthsNames('en');
// -> [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

// to localize import locale from dayjs package
import 'dayjs/locale/ru';
import { getMonthsNames } from '@mantine/dates';

getMonthsNames('ru');
// -> ['январь','февраль','март','апрель','май','июнь','июль','август','сентябрь','октябрь','ноябрь','декабрь']

get-weekdays-names

Returns an array of short weekdays names for given locale, used in Month component to render weekdays row

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

getWeekdaysNames('en');
// -> ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']

get-years-range

Returns an array of years, which fall into given range, used in Calendar component to render year select

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

getYearsRange({ from: 2020, to: 2025 });
// -> [2020, 2021, 2022, 2023, 2024, 2025]

is-same-date

Returns true if two dates have the same year, month and date, other properties (minutes, seconds, etc.) are ignored

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

isSameDate(new Date(2020, 7, 21), new Date(2020, 7, 21)); // -> true
isSameDate(new Date(2020, 7, 21), new Date(2020, 7, 22)); // -> false

is-same-month

Returns true if two dates have the same year and month, other properties (date, minutes, seconds, etc.) are ignored

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

isSameMonth(new Date(2020, 7, 21), new Date(2020, 7, 22)); // -> true
isSameMonth(new Date(2020, 7, 21), new Date(2020, 8, 22)); // -> false