DateInput component

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

function Demo() {
  return (
    <div style={{ maxWidth: 400, margin: 'auto' }}>
      <DateInput placeholder="Free date input" />
    </div>
  );
}

Name	Type	Description
allowDeselect	boolean	Determines whether value can be deselected when the user clicks on the selected date in the calendar or erases content of the input, true if clearable prop is set, false by default
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
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
defaultValue	Date	Default value for uncontrolled component
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
locale	string	dayjs locale, defaults to value defined in DatesProvider
maxDate	Date	Maximum possible date
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
onLevelClick	() => void	Called when level button is clicked
onNext	() => void	Called when next button is clicked
onPrevious	() => void	Called when previous 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
renderDay	(date: Date) => ReactNode	Controls day value rendering
value	Date	Value for controlled component
valueFormat	string	Dayjs format to display input value, "MMMM D, YYYY" 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
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