Datepicker
React Bootstrap 5 Datepicker component
Date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.
Note: Read the API tab to find all available options and advanced customization
Basic example
The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. Date pickers can be embedded into dialogs on mobile and text field dropdowns on desktop.
Inline version
Use the data-mdb-inline="true" attribute to initialize and set the default date for an inline datepicker inside a block element.
Translations
The picker can be customized to add support for internationalization. Modify the component options to add translations.
Formats
Use format option to display date in a human-friendly format.
Formatting rules
The following rules can be used to format any date:
| Rule | Description | Result |
|---|---|---|
d | Date of the month | 1 – 31 |
dd | Date of the month with a leading zero | 01 – 31 |
ddd | Day of the week in short form | Sun – Sat |
dddd | Day of the week in full form | Sunday – Saturday |
m | Month of the year | 1 – 12 |
mm | Month of the year with a leading zero | 01 – 12 |
mmm | Month name in short form | Jan – Dec |
mmmm | Month name in full form | January – December |
yy | Year in short form * | 00 – 99 |
yyyy | Year in full form | 2000 – 2999 |
Date limits
Set the minimum and maximum selectable dates with the min and max properties.
Disable past
Use the disablePast option to disallow past date selection.
Disable future
Use the disableFuture option to disallow past date selection.
Disabled dates
The filter option accept function in which you can specify conditions for date filtering. A result of true indicates that the date should be valid and a result of false indicates that it should be disabled. In the following example all saturdays and sundays will be disabled.
Input toggle
Add toggleInput property to the input element to enable toggling on input click.
Custom toggle icon
You can customize the toggle icon by adding a toggle button template to the property.
Custom header content
You can edit the contents of the MDBDatepicker header by adding customHeader prop and the JSX code as its value. You can use getFormattedDateValues event to get acces to object with 6 values: dayNumber, weekdayShort, weekdayFull, monthShort, monthFull, yearShort, yearFull which you can use however you like.
Accessibility
We added proper aria attributes to the datepicker controls to make the component accessible. It's possible to change the values of those attributes by modifying the component options: