DatePickerInput

Date, multiple dates and dates range picker input

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

DatePicker props

DatePickerInput supports all props from DatePicker, read through its documentation to learn about all component features that are not listed on this page.

Usage

Pick date

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

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DatePickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Multiple dates

Set type="multiple" to allow user to pick multiple dates:

Pick dates

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

function Demo() {
  const [value, setValue] = useState<Date[]>([]);
  return (
    <DatePickerInput
      type="multiple"
      label="Pick dates"
      placeholder="Pick dates"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Dates range

Set type="range" to allow user to pick dates range:

Pick dates range

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

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  return (
    <DatePickerInput
      type="range"
      label="Pick dates range"
      placeholder="Pick dates range"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Open picker in modal

By default, DatePicker is rendered inside Popover. You can change that to Modal by setting dropdownType="modal":

Pick date

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

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DatePickerInput
      dropdownType="modal"
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Value format

Use valueFormat prop to change dayjs format of value label:

Pick date

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

function Demo() {
  return (
    <DatePickerInput
      valueFormat="YYYY MMM DD"
      type="multiple"
      label="Pick date"
      placeholder="Pick date"
      mx="auto"
      maw={400}
    />
  );
}

Clearable

Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

Pick date

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

function Demo() {
  return (
    <DatePickerInput
      clearable
      defaultValue={new Date()}
      label="Pick date"
      placeholder="Pick date"
      mx="auto"
      maw={400}
    />
  );
}

Disabled state

Disabled

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

function Demo() {
  return (
    <DatePickerInput
      valueFormat="YYYY MMM DD"
      type="multiple"
      label="Disabled"
      placeholder="Pick date"
    />
  );
}

Input props

DatePickerInput supports all props from Input and Input.Wrapper components:

Pick date

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

With asterisk

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

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

With icon

Pick date

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

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DatePickerInput
      icon={<IconCalendar size="1.1rem" stroke={1.5} />}
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Accessibility

DatePicker labels

Follow DatePicker documentation to add all required labels to the year picker inside popover.

Input label

Set aria-label in case you use component without label:

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

Go back

DatePicker – @mantine/dates

Up next

DateTimePicker – @mantine/dates

DatePickerInput component props

Name	Type	Description
allowDeselect	boolean	Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
allowSingleDateInRange	boolean	Determines whether single year can be selected as range, applicable only when type="range"
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
closeOnChange	boolean	Determines whether dropdown should be closed when date is selected, not applicable when type="multiple", true 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
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 \| DatesRangeValue \| 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
dropdownType	"modal" \| "popover"	Type of dropdown, defaults to popover
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
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
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
labelSeparator	string	Separator between range value
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
modalProps	Partial<Omit<ModalProps, "children">>	Props added to Modal component
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
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: DatePickerValue<Type>) => void	Called when value changes
onDateChange	(date: Date) => void	Called when date changes
onLevelChange	(level: CalendarLevel) => void	Called when level changes
onMonthMouseEnter	(event: MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void	Called when mouse enters month control
onMonthSelect	(date: Date) => void	Called when user clicks month on year level
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
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
onYearMouseEnter	(event: MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void	Called when mouse enters year control
onYearSelect	(date: Date) => void	Called when user clicks year on decade level
popoverProps	Partial<Omit<PopoverProps, "children">>	Props added to Popover component
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
readOnly	boolean	Determines whether the user can modify the value
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
sortDates	boolean	Determines whether dates value should be sorted before onChange call, only applicable when type="multiple", true by default
type	"default" \| "multiple" \| "range"	Picker type: range, multiple or default
value	Date \| DatesRangeValue \| 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
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

DatePickerInput component Styles API

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

Learn more about Styles API

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