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

Date input

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:

Date input

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:

Date input

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:

Type WW2

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

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

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 { DateInput } from '@mantine/dates';

function Demo() {
  return (
    <DateInput clearable defaultValue={new Date()} 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={new Date()}
      maxDate={dayjs(new Date()).add(1, 'month').toDate()}
      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/core';

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

Calendar

DateTimePicker

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

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter