After installation import package styles at the root of your application:
@mantine/dates package and importing styles, you can use all components from it:
@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.
If you want to avoid layout shifts, set
consistentWeeks: true in
This will make sure that every month has 6 weeks, even if outside days are not in the same month.
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.
To add localization you must import
import 'dayjs/locale/x'; in your application (
x is locale name)
locale either on DatesProvider or on each component individually.
Example of setting locale on DatesProvider:
The code above works in all environments, except Next.js app router.
If you are using Next.js app router, you must add
'use client'; to the
top of the file where you are importing
dayjs/locale/x – locale data
is required both on client and server.