DateTimePicker component

import { DateTimePicker } from 'mantine-dates-6';

function Demo() {
  return (
    <div style={{ maxWidth: 400, margin: 'auto' }}>
      <DateTimePicker placeholder="Pick date and time" />
    </div>
  );
}

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 month, 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
dropdownType	"popover" \| "modal"	Type of dropdown, defaults to popover
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
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
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
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
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
onNext	() => void	Called when next button is clicked
onPrevious	() => void	Called when previous 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
previousDisabled	boolean	Determines whether previous control should be disabled, defaults to true
previousIcon	ReactNode	Change previous icon
previousLabel	string	aria-label for previous button
readOnly	boolean	Determines whether the user can modify the value
renderDay	(date: Date) => ReactNode	Controls day value rendering
submitButtonProps	ActionIconProps & Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" \| keyof ButtonHTMLAttributes<...>>	Props added to submit button
timeInputProps	TimeInputProps	TimeInput component props
value	Date	Controlled component value
valueFormat	string	Dayjs format to display input value, "DD/MM/YYYY HH:mm" by default
weekdayFormat	string	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
withNext	boolean	Determines whether next control should be rendered, defaults to true
withPrevious	boolean	Determines whether previous control should be rendered, defaults to true
withSeconds	boolean	Determines whether seconds input should be rendered
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