v4.2.12

Mantine Dates

Capture date inputs from user and display calendars
Source
View source code
Package
@mantine/dates
License
MIT

Installation

Package depends on:

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 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
Go back
Transition – @mantine/core
Up next
Calendar – @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