@mantine/dates

What is @mantine/dates?

@mantine/dates is a part of the Mantine library, which provides a set of React components and hooks for building modern web applications. The @mantine/dates package specifically focuses on date and time-related components, offering a variety of tools to handle date picking, time picking, and calendar functionalities.

What are @mantine/dates's main functionalities?

DatePicker

The DatePicker component allows users to select a date from a calendar popup. It can be customized with various props to fit different use cases.

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

function Demo() {
  return <DatePicker placeholder="Pick a date" label="Event date" />;
}

TimeInput

The TimeInput component provides a way for users to input a time value. It supports various formats and can be customized to match the application's design.

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

function Demo() {
  return <TimeInput label="Event time" defaultValue={new Date()} />;
}

Calendar

The Calendar component displays a full calendar view, allowing users to navigate through months and select dates. It can be used for more complex date-related functionalities.

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

function Demo() {
  return <Calendar />;
}

DateRangePicker

The DateRangePicker component enables users to select a range of dates. This is useful for applications that require start and end date selections, such as booking systems.

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

function Demo() {
  return <DateRangePicker label="Select date range" placeholder="Pick dates" />;
}

Other packages similar to @mantine/dates

react-datepicker

react-datepicker is a popular date picker component for React. It offers a wide range of customization options and supports both date and time selection. Compared to @mantine/dates, it is more focused on date picking functionalities and has a larger community and more extensive documentation.

react-day-picker

react-day-picker is a flexible date picker component for React. It provides a highly customizable calendar interface and supports various date selection modes. While @mantine/dates offers a more integrated solution with other Mantine components, react-day-picker excels in providing a highly customizable and standalone date picking experience.

react-calendar

react-calendar is a simple and lightweight calendar component for React. It focuses on providing a straightforward calendar interface with basic date selection features. Compared to @mantine/dates, react-calendar is more lightweight and easier to integrate into projects that require minimalistic calendar functionalities.

README

Mantine dates

Calendars, date and time pickers based on Mantine components

Documentation

Installation

# With yarn
yarn add @mantine/core @mantine/hooks @mantine/dates react-jss

# With npm
yarn add @mantine/core @mantine/hooks @mantine/dates react-jss

# With install-peerdeps
npx install-peerdeps @mantine/dates

Usage

Now you can import and use any component from @mantine/dates:

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

function App() {
  return <DatePicker />;
}

Licence

All Mantine packages have MIT licence. All Mantine dependencies also have MIT licence, except react-transition-group package which has BSD-3-Clause license.