Mantine Dates

Capture date inputs from user and display calendars
License

Installation

Package depends on @mantine/core and @mantine/hooks.

Install with yarn:

yarn add dayjs @mantine/dates

Install with npm:

npm install dayjs @mantine/dates

Localization

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

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

MantineProvider allows you to set a datesLocale property for all date components, or you can overwrite the locale on a per component basis:

import { DatePicker, Calendar, Month } from '@mantine/dates';
function Demo() {
return (
<>
<DatePicker locale="de" />
<Calendar locale="de" />
<Month locale="de" />
</>
);
}

Components

DatePicker

TimeInput

:

Calendar

Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Su

Month

Mo
Tu
We
Th
Fr
Sa
Su

Utility functions

Apart from components @mantine/dates package also exports several utility functions.

get-month-days

Returns an array of weeks of current month:

import { getMonthDays } from '@mantine/dates';
getMonthDays(new Date()); // -> [[7xDate objects] x amount of weeks in current month]

get-months-names

Returns months names for given locale and format:

import { getMonthsNames } from '@mantine/dates';
getMonthsNames('en', 'MMMM');
// -> [ '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', 'MMMM');
// -> ['январь','февраль','март','апрель','май','июнь','июль','август','сентябрь','октябрь','ноябрь','декабрь']

get-weekdays-names

Returns an array of short weekdays names for given locale:

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:

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