DateTimePicker

Capture datetime from the user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

DatePicker props

DateTimePicker 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 and time

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

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      maw={400}
      mx="auto"
    />
  );
}

With seconds

Pick date and time

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

function Demo() {
  return (
    <DateTimePicker
      withSeconds
      label="Pick date and time"
      placeholder="Pick date and time"
      maw={400}
      mx="auto"
    />
  );
}

Value format

Use valueFormat prop to change dayjs format of value label:

Pick date and time

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

function Demo() {
  return (
    <DateTimePicker
      valueFormat="DD MMM YYYY hh:mm A"
      label="Pick date and time"
      placeholder="Pick date and time"
      maw={400}
      mx="auto"
    />
  );
}

Disabled state

Disabled

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

function Demo() {
  return (
    <DateTimePicker
      label="Disabled"
      placeholder="Pick date and time"
    />
  );
}

Input props

Current date and time

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

With asterisk

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

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

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 and time

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

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

Open picker in modal

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

Pick date and time

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

function Demo() {
  return (
    <DateTimePicker
      dropdownType="modal"
      label="Pick date and time"
      placeholder="Pick date and time"
      maw={400}
      mx="auto"
    />
  );
}

Accessibility

DatePicker labels

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

TimeInput label

Use timeInputProps to set aria-label of TimeInput:

<DatePickerInput timeInputProps={{ 'aria-label': 'Pick time' }} />

Submit button label

Use submitButtonProps to add label to the submit button:

<DatePickerInput submitButtonProps={{ 'aria-label': 'Submit' }} />

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

DatePickerInput – @mantine/dates

Up next

MonthPicker – @mantine/dates

DateTimePicker component props

Name	Type	Description
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
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"
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
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
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: Date) => void	Called when value changes
onDateChange	(date: Date) => void	Called when date changes
onLevelChange	(level: CalendarLevel) => void	Called when level changes
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
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
submitButtonProps	ActionIconProps & Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" \| keyof ButtonHTMLAttributes<...>>	Props added to submit button
timeInputProps	TimeInputProps & { ref?: Ref<HTMLInputElement>; }	TimeInput component props
value	Date	Controlled component value
valueFormat	string	Dayjs format to display input value, "DD/MM/YYYY HH:mm" 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
withSeconds	boolean	Determines whether seconds input should be rendered
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

DateTimePicker component Styles API

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

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