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

Presets

Use the presets prop to add custom date presets. Presets are displayed next to the calendar:

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:

valueFormat also accepts a function that receives the value as a YYYY-MM-DD string and returns the formatted value. Use it to format the value with Intl.DateTimeFormat instead of dayjs – see formatting without dayjs.

Note that valueFormat is also used to parse user input – a function cannot be used for that. When valueFormat is a function, typed values are parsed as YYYY-MM-DD strings. Set the dateParser prop to support other formats:

tsx

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

function Demo() {
  return (
    <DateInput
      valueFormat={(date) =>
        new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(`${date}T00:00:00`))
      }
      dateParser={(input) => {
        const parsed = new Date(input);
        return Number.isNaN(parsed.getTime()) ? null : parsed;
      }}
    />
  );
}

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