Date, multiple dates and dates range picker input
DatePickerInput supports most of the DatePicker props. Read through the DatePicker documentation to learn about all component features that are not listed on this page.
Set type="multiple" to allow users to pick multiple dates:
Set type="range" to allow users to pick a date range:
Use the presets prop to add custom date presets. Presets are displayed next to the calendar:
To use presets with type="range" , define the value as a tuple of two dates:
By default, DatePicker is rendered inside Popover . You can change that to Modal by setting dropdownType="modal" :
Use the valueFormat prop to change the dayjs format of the value label:
valueFormatter is a more powerful alternative to the valueFormat prop. It allows formatting the value label with a custom function. The function is the same for all component types ( default , multiple and range ) – you need to perform additional checks inside the function to handle different types.
Example of using a custom formatter function with type="multiple" :
Set the clearable prop to display a clear button in the right section. Note that if you set the rightSection prop, the clear button will not be displayed.
The clearSectionMode prop determines how the clear button and rightSection are rendered:
minDate and maxDate props define the minimum and maximum dates that can be picked. You can specify minDate and maxDate as Date objects:
defaultLevel prop allows setting the initial level of the picker. Allowed values are month , year and decade .
maxLevel prop allows to set the maximum level that can be reached by clicking on the label in the header.
getDayProps , getYearControlProps and getMonthControlProps props allow passing props to the control component based on the date. It is useful for disabling specific dates or customising styles/className.
excludeDate prop allows disabling specific dates. It accepts a function that receives a date and returns true if the date should be disabled. In the following example, all weekends are disabled:
hideOutsideDates prop allows hiding dates that do not belong to the current month.
hideWeekdays prop allows hiding weekdays names.
weekendDays prop allows changing which days are considered weekends. It accepts an array of weekday indices (0-6). 0 is Sunday, 6 is Saturday. By default, [0, 6] are used.
firstDayOfWeek prop allows changing the first day of the week. It accepts a weekday index (0-6). 0 is Sunday, 6 is Saturday. By default, 1 (Monday) is used.
decadeLabelFormat , yearLabelFormat and monthLabelFormat props allow changing the format of the label in the header. The props accept a dayjs format string .
monthsListFormat and yearsListFormat props allow changing the format of the month and year labels in the list. The props accept a dayjs format string .
withWeekNumbers prop allows displaying week numbers.
renderDay prop allows customising the day control. It is useful for adding indicators or other elements to the day control.
headerControlsOrder prop allows changing the order of the controls in the header. It accepts an array of strings: level , previous and next . Styles of the controls can be customised with styles prop.
DatePickerInput component supports Input and Input.Wrapper component features and all button element props. The DatePickerInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
If DatePickerInput is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :