Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

DateInput

Free form date input

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

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

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

function Demo() {
  const [value, setValue] = useState<Date | 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:

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

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

With time

Include time in valueFormat to allow hours, minutes and seconds to be entered:

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

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

function Demo() {
  return (
    <DateInput
      valueFormat="DD/MM/YYYY HH:mm:ss"
      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:

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

const dateParser: DateInputProps['dateParser'] = (input) => {
  if (input === 'WW2') {
    return new Date(1939, 8, 1);
  }

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

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:

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

function Demo() {
  return (
    <DateInput clearable defaultValue={new Date()} label="Date input" placeholder="Date input" />
  );
}

Min and max date

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.

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

function Demo() {
  return (
    <DateInput
      minDate={new Date()}
      maxDate={dayjs(new Date()).add(1, 'month').toDate()}
      label="Date input"
      placeholder="Date input"
    />
  );
}

Disabled state

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 description

Variant
Size
Radius
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" />;
}

Previous

Calendar

Next

DateTimePicker

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people