DateInput | Mantine

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

Date input

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

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <DateInput
      value={value}
      onChange={setValue}
      label="Date input"
      placeholder="Date input"
    />
  );
}

Presets

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

With presets

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

function Demo() {
  return (
    <DateInput
      label="With presets"
      placeholder="Select date"
      presets={[
        { value: dayjs().subtract(1, 'day').format('YYYY-MM-DD'), label: 'Yesterday' },
        { value: dayjs().format('YYYY-MM-DD'), label: 'Today' },
        { value: dayjs().add(1, 'day').format('YYYY-MM-DD'), label: 'Tomorrow' },
        { value: dayjs().add(1, 'month').format('YYYY-MM-DD'), label: 'Next month' },
        { value: dayjs().add(1, 'year').format('YYYY-MM-DD'), label: 'Next year' },
        { value: dayjs().subtract(1, 'month').format('YYYY-MM-DD'), label: 'Last month' },
        { value: dayjs().subtract(1, 'year').format('YYYY-MM-DD'), label: 'Last year' },
      ]}
    />
  );
}

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:

// 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:

Date input

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

function Demo() {
  return <DateInput valueFormat="YYYY MMM DD" label="Date input" placeholder="Date input" />;
}

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:

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 and time input

import { useState } from 'react';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { DateInput, DateInputProps, DateStringValue } from '@mantine/dates';

// It is required to extend dayjs with customParseFormat plugin
// in order to parse dates with custom format
dayjs.extend(customParseFormat);

const dateParser: DateInputProps['dateParser'] = (input) => {
  if (!input) {
    return null;
  }
  const parsed = dayjs(input, 'YYYY-MM-DD HH:mm', true);
  return parsed.isValid() ? parsed.format('YYYY-MM-DD HH:mm:ss') : null;
};

function Demo() {
  const [value, setValue] = useState<DateStringValue | null>(null);
  return (
    <DateInput
      withTime
      valueFormat="YYYY-MM-DD HH:mm"
      dateParser={dateParser}
      value={value}
      onChange={setValue}
      label="Date and time input"
      placeholder="Date and time input"
    />
  );
}

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:

Type WW2

import dayjs from 'dayjs';
import { DateInput, DateInputProps } from '@mantine/dates';

const dateParser: DateInputProps['dateParser'] = (input) => {
  if (input === 'WW2') {
    return '1939-09-01';
  }

  return dayjs(input, 'DD/MM/YYYY').format('YYYY-MM-DD');
};

function Demo() {
  return (
    <DateInput
      dateParser={dateParser}
      valueFormat="DD/MM/YYYY"
      label="Type WW2"
      placeholder="Type WW2"
    />
  );
}

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:

Date input

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

function Demo() {
  return (
    <DateInput
      clearable
      defaultValue={dayjs().format('YYYY-MM-DD')}
      label="Date input"
      placeholder="Date input"
    />
  );
}

Clear section mode

The clearSectionMode prop determines how the clear button and rightSection are rendered:

'both' (default) – render both the clear button and rightSection
'rightSection' – render only the user-supplied rightSection, ignore clear button
'clear' – render only the clear button, ignore rightSection

clearSectionMode='both' (default)

clearSectionMode='rightSection'

clearSectionMode='clear'

import { CaretDownIcon } from '@phosphor-icons/react';
import { Stack } from '@mantine/core';
import { DateInput } from '@mantine/dates';

function Demo() {
  return (
    <Stack>
      <DateInput
        label="clearSectionMode='both' (default)"
        placeholder="Pick date"
        defaultValue={new Date()}
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="both"
      />

      <DateInput
        label="clearSectionMode='rightSection'"
        placeholder="Pick date"
        defaultValue={new Date()}
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="rightSection"
      />

      <DateInput
        label="clearSectionMode='clear'"
        placeholder="Pick date"
        defaultValue={new Date()}
        clearable
        rightSection={<CaretDownIcon size={16} />}
        clearSectionMode="clear"
      />
    </Stack>
  );
}

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.

Date input

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

function Demo() {
  return (
    <DateInput
      minDate={dayjs().format('YYYY-MM-DD')}
      maxDate={dayjs().add(1, 'month').format('YYYY-MM-DD')}
      label="Date input"
      placeholder="Date input"
    />
  );
}

Disabled state

Disabled

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

function Demo() {
  return <DateInput label="Disabled" placeholder="Date input" disabled />;
}

Input props

DateInput component supports Input and Input.Wrapper component features and all input element props. The DateInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.

Input label

Input description

Variant

Default

Filled

Unstyled

Size

Radius

Label

With asterisk

Description

Error

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

function Demo() {
  return (
    <DateInput
      label="Input label"
      description="Input description"
      placeholder="Input placeholder"
    />
  );
}

Get element ref

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

function Demo() {
  const ref = useRef<HTMLInputElement>(null);
  return <DateInput ref={ref} />;
}

Accessibility

If DateInput is used without the label prop, it will not be announced properly by screen readers:

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

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <DateInput />;
}

Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:

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

// Accessible input – it has aria-label
function Demo() {
  return <DateInput aria-label="My input" />;
}

If the label prop is set, the input will be accessible and it is not required to set aria-label:

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

// Accessible input – it has associated label element
function Demo() {
  return <DateInput label="My input" />;
}

InlineDateTimePicker

MonthPicker