DateInput

Free date input

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

DatePicker props

DateInput supports all props from DatePicker, read through its 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"
      maw={400}
      mx="auto"
    />
  );
}

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"
      maw={400}
      mx="auto"
    />
  );
}

With time

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

Date input

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

function Demo() {
  return (
    <DateInput
      valueFormat="DD/MM/YYYY HH:mm:ss"
      label="Date input"
      placeholder="Date input"
      maw={400}
      mx="auto"
    />
  );
}

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

function Demo() {
  return (
    <DateInput
      dateParser={(input) => {
        if (input === 'WW2') {
          return new Date(1939, 8, 1);
        }
        return new Date(input);
      }}
      valueFormat="DD/MM/YYYY"
      label="Type WW2"
      placeholder="Type WW2"
      maw={400}
      mx="auto"
    />
  );
}

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 label="Date input" placeholder="Date input" maw={400} mx="auto" />;
}

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 { 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"
      maw={400}
      mx="auto"
    />
  );
}

Disabled state

Disabled

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

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

Input props

Current date

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

With asterisk

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

function Demo() {
  return (
    <DateInput
      placeholder="Current date"
      label="Current date"
      withAsterisk
    />
  );
}

<DateInput /> // -> not ok, input is not labeled
<DateInput label="My input" /> // -> ok, input and label is connected
<DateInput aria-label="My input" /> // -> ok, label is not visible but will be announced by screen reader

Go back

Calendar – @mantine/dates

Up next

DatePicker – @mantine/dates

DateInput component props

Name	Type	Description
allowDeselect	boolean	Determines whether value can be deselected when the user clicks on the selected date in the calendar (only when clearable prop is set), defaults to true if clearable prop is set, false otherwise
ariaLabels	CalendarAriaLabels	aria-label attributes for controls on different levels
clearButtonProps	Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" \| keyof ButtonHTMLAttributes<...>>	Props added to clear button
clearable	boolean	Determines whether input value can be cleared, adds clear button to right section, false by default
columnsToScroll	number	Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns
date	Date	Date that is displayed, used for controlled component
dateParser	(value: string) => Date	Parses user input to convert it to Date object
decadeLabelFormat	string \| ((startOfDecade: Date, endOfDecade: Date) => ReactNode)	dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY"
defaultDate	Date	Initial date that is displayed, used for uncontrolled component
defaultLevel	"month" \| "year" \| "decade"	Initial level displayed to the user (decade, year, month), used for uncontrolled component
defaultValue	Date	Default value for uncontrolled component
description	ReactNode	Input description, displayed after label
descriptionProps	Record<string, any>	Props spread to description element
disabled	boolean	Disabled input state
error	ReactNode	Displays error message after input
errorProps	Record<string, any>	Props spread to error element
excludeDate	(date: Date) => boolean	Callback function to determine whether the day should be disabled
firstDayOfWeek	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6	number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday
fixOnBlur	boolean	Determines whether input value should be reverted to last known valid value on blur, true by default
getDayAriaLabel	(date: Date) => string	Assigns aria-label to days based on date
getDayProps	(date: Date) => Partial<DayProps>	Adds props to Day component based on date
getMonthControlProps	(date: Date) => Partial<PickerControlProps>	Adds props to month picker control based on date
getYearControlProps	(date: Date) => Partial<PickerControlProps>	Adds props to year picker control based on date
hasNextLevel	boolean	Determines whether next level button should be enabled, defaults to true
hideOutsideDates	boolean	Determines whether outside dates should be hidden, defaults to false
hideWeekdays	boolean	Determines whether weekdays row should be hidden, defaults to false
icon	ReactNode	Adds icon on the left side of input
iconWidth	Width<string \| number>	Width of icon section
inputContainer	(children: ReactNode) => ReactNode	Input container component, defaults to React.Fragment
inputWrapperOrder	("input" \| "label" \| "error" \| "description")[]	Controls order of the Input.Wrapper elements
label	ReactNode	Input label, displayed before input
labelProps	Record<string, any>	Props spread to label element
level	"month" \| "year" \| "decade"	Current level displayed to the user (decade, year, month), used for controlled component
locale	string	dayjs locale, defaults to value defined in DatesProvider
maxDate	Date	Maximum possible date
maxLevel	"month" \| "year" \| "decade"	Max level that user can go up to (decade, year, month), defaults to decade
minDate	Date	Minimum possible date
monthLabelFormat	string \| ((month: Date) => ReactNode)	dayjs label format to display month label or a function that returns month label based on month value, defaults to "MMMM YYYY"
monthsListFormat	string	dayjs format for months list
nextDisabled	boolean	Determines whether next control should be disabled, defaults to true
nextIcon	ReactNode	Change next icon
nextLabel	string	aria-label for next button
numberOfColumns	number	Number of columns to render next to each other
onChange	(value: Date) => void	Called when value changes
onDateChange	(date: Date) => void	Called when date changes
onLevelChange	(level: CalendarLevel) => void	Called when level changes
onLevelClick	() => void	Called when level button is clicked
onNext	() => void	Called when next button is clicked
onNextDecade	(date: Date) => void	Called when next decade button is clicked
onNextMonth	(date: Date) => void	Called when next month button is clicked
onNextYear	(date: Date) => void	Called when next year button is clicked
onPrevious	() => void	Called when previous button is clicked
onPreviousDecade	(date: Date) => void	Called when previous decade button is clicked
onPreviousMonth	(date: Date) => void	Called when previous month button is clicked
onPreviousYear	(date: Date) => void	Called when previous year button is clicked
popoverProps	Partial<Omit<PopoverProps, "children">>	Props added to Popover component
preserveTime	boolean	Determines whether time (hours, minutes, seconds and milliseconds) should be preserved when new date is picked, true by default
previousDisabled	boolean	Determines whether previous control should be disabled, defaults to true
previousIcon	ReactNode	Change previous icon
previousLabel	string	aria-label for previous button
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
renderDay	(date: Date) => ReactNode	Controls day value rendering
required	boolean	Sets required on input element
rightSection	ReactNode	Right section of input, similar to icon but on the right
rightSectionProps	Record<string, any>	Props spread to rightSection div element
rightSectionWidth	Width<string \| number>	Width of right section, is used to calculate input padding-right
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Input size
value	Date	Value for controlled component
valueFormat	string	Dayjs format to display input value, "MMMM D, YYYY" by default
variant	Variants<"unstyled" \| "default" \| "filled">	Defines input appearance, defaults to default in light color scheme and filled in dark
weekdayFormat	string \| ((date: Date) => ReactNode)	dayjs format for weekdays names, defaults to "dd"
weekendDays	DayOfWeek[]	Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider
withAsterisk	boolean	Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
withCellSpacing	boolean	Determines whether controls should be separated by spacing, true by default
withNext	boolean	Determines whether next control should be rendered, defaults to true
withPrevious	boolean	Determines whether previous control should be rendered, defaults to true
wrapperProps	Record<string, any>	Properties spread to root element
yearLabelFormat	string \| ((year: Date) => ReactNode)	dayjs label format to display year label or a function that returns year label based on year value, defaults to "YYYY"
yearsListFormat	string	dayjs format for years list

DateInput component Styles API

Name	Static selector	Description
wrapper	.mantine-DateInput-wrapper	Root Input element
icon	.mantine-DateInput-icon	Input icon wrapper on the left side of the input, controlled by icon prop
input	.mantine-DateInput-input	Main input element
rightSection	.mantine-DateInput-rightSection	Input right section, controlled by rightSection prop
root	.mantine-DateInput-root	Root element
label	.mantine-DateInput-label	Label element styles, defined by label prop
error	.mantine-DateInput-error	Error element styles, defined by error prop
description	.mantine-DateInput-description	Description element styles, defined by description prop
required	.mantine-DateInput-required	Required asterisk element styles, defined by required prop
calendar	.mantine-DateInput-calendar	Calendar root element
calendarHeader	.mantine-DateInput-calendarHeader	Calendar header root element
calendarHeaderControl	.mantine-DateInput-calendarHeaderControl	Previous/next calendar header controls
calendarHeaderControlIcon	.mantine-DateInput-calendarHeaderControlIcon	Icon of previous/next calendar header controls
calendarHeaderLevel	.mantine-DateInput-calendarHeaderLevel	Level control (changes levels when clicked, month -> year -> decade)
decadeLevelGroup	.mantine-DateInput-decadeLevelGroup	Group of decades levels
decadeLevel	.mantine-DateInput-decadeLevel	Decade level root element
pickerControl	.mantine-DateInput-pickerControl	Button used to pick months and years
yearsList	.mantine-DateInput-yearsList	Years list table element
yearsListRow	.mantine-DateInput-yearsListRow	Years list row element
yearsListCell	.mantine-DateInput-yearsListCell	Years list cell element
yearLevelGroup	.mantine-DateInput-yearLevelGroup	Group of year levels
yearLevel	.mantine-DateInput-yearLevel	Year level root element
monthsList	.mantine-DateInput-monthsList	Months list table element
monthsListRow	.mantine-DateInput-monthsListRow	Months list table row element
monthsListCell	.mantine-DateInput-monthsListCell	Months list table cell element
monthLevelGroup	.mantine-DateInput-monthLevelGroup	Group or month levels
monthLevel	.mantine-DateInput-monthLevel	Month level root element
monthThead	.mantine-DateInput-monthThead	thead element of month table
monthRow	.mantine-DateInput-monthRow	tr element of month table
monthTbody	.mantine-DateInput-monthTbody	tbody element of month table
monthCell	.mantine-DateInput-monthCell	td element of month table
month	.mantine-DateInput-month	Month table element
weekdaysRow	.mantine-DateInput-weekdaysRow	Weekdays tr element
weekday	.mantine-DateInput-weekday	Weekday th element
day	.mantine-DateInput-day	Month day control