Date Input - Mantine

import { DateInputDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.DateInput);

DatePicker props

DateInput supports most of the DatePicker props. Read through the DatePicker documentation to learn about all component features that are not listed on this page.

Usage

Value format

Use the valueFormat prop to change the dayjs format of the value label. To use some custom formats, you need to enable the custom parse format plugin:

tsx

// Do this once in your application root file
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

Example of using DateInput with a custom format:

With time

If your valueFormat includes time (for example, YYYY-MM-DD HH:mm), set the withTime prop to preserve the time part of the value. Without withTime, the time portion is discarded and always defaults to 00:00. When using withTime, you will also need to provide a custom dateParser that returns a date-time string:

Date parser

Use the dateParser prop to replace the default date parser. The parser function accepts user input (string) and must return a Date object:

Allow clear

Set the clearable prop to allow removing the value from the input. The input will be cleared if the user selects the same date in the dropdown or clears the input value:

Min and max date

Set the minDate and maxDate props to define minimum and maximum dates. If a date that is after maxDate or before minDate is entered, it will be considered invalid and the input value will be reverted to the last known valid date value.

Disabled state

Input props