DateInput

Free form date input

Source

Docs

Package

DatePicker props

DateInput supports most of the DatePicker props, read through 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"
    />
  );
}

Value format

Use valueFormat prop to change dayjs format of value label. To use some custom formats, you need to enable 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 custom format:

Date input

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

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

Date parser

Use dateParser prop to replace default date parser. Parser function accepts user input (string) and must return 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 clearable prop to allow removing value from the input. Input will be cleared if user selects the same date in dropdown or clears 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"
    />
  );
}

Set minDate and maxDate props to define min and max dates. If date that is after maxDate or before minDate is entered, then it will be considered invalid and input value will be reverted to 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 components features and all input element props. DateInput documentation does not include all features supported by the component – see 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 label prop, it will not be announced properly by screen reader:

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 label will not be visible, but screen reader will announce it:

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

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

If label prop is set, input will be accessible 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" />;
}

DatePickerInput

MonthPicker