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


Inline version


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.


Disabled dates

The fitler 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.


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 modyfing the component options:

Datepicker - API


Import


        import { MDBDatepicker } from 'mdb-react-ui-kit';
      

Properties

MDBDatepicker

Name Type Default Description Example
cancelBtnText String 'CANCEL' Changes cancel button text <MDBDatepicker cancelBtnText='QUIT' />
className String '' Add custom class to the MDBDatepicker <MDBDatepicker className="class" />
clearBtnText String 'CLEAR' Changes clear button text <MDBDatepicker clearBtnText='RESET' />
closeOnEsc Boolean true Disables closing MDBDatepicker on escape <MDBDatepicker closeOnEsc={false} />
filter Function - Defines filter function for MDBDatepicker <MDBDatepicker filter={filterFunction} />
format String 'dd/mm/yyyy' Changes date format displayed in input <MDBDatepicker format='dd-mm-yyyy' />
icon JSX <MDBIcon far icon='calendar' /> Changes default icon <MDBDatepicker icon={<MDBIcon fas icon='calendar' />} />
inline Boolean false Changes datepicker display mode to inline (dropdown) <MDBDatepicker inline />
inputToggle Boolean false Turn on MDBDatepicker on input focus <MDBDatepicker inputToggle />
labelText String 'Select a date' Changes default label <MDBDatepicker labelText='Pick date' />
max Date - Changes max available date <MDBDatepicker max={new Date(2021, 10, 14)}/>
min Date - Changes min available date <MDBDatepicker min={new Date(2020, 5, 10)} />
monthsFull Array [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ] Changes array of months full names <MDBDatepicker monthsFull={customMonthsFullArray} />
monthsShort Array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Changes array of months short names <MDBDatepicker monthsShort={customMonthsShortArray} />
setValue Function - Function for setting the value of the MDBDatepicker <MDBDatepicker value={datepickerValue} setValue={setDatepickerValue} />
startDate Date - Changes default date to which datepicker will navigate <MDBDatepicker startDate={new Date(2021, 11, 25)} />
startDay Number 0 Changes default start day (0 for Sunday, 1 for Monday...) <MDBDatepicker startDay={1} />
title String 'Select date' Changes datepicker title <MDBDatepicker title='Datepicker' />
weekdaysFull Array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Changes array of weekdays full names <MDBDatepicker weekdaysFull={weekdaysFullArray} />
weekdaysNarrow Array ['S', 'M', 'T', 'W', 'T', 'F', 'S'] Changes array of weekdays narrow names <MDBDatepicker weekdaysNarrow={weekdaysNarrowArray} />
weekdaysShort Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Changes array of weekdays short names <MDBDatepicker weekdaysShort={weekdaysShortArray} />
value String '' Changes default datepicker view (days/years/months) <MDBDatepicker value={datepickerValue} setValue={setDatepickerValue} />
view String 'days' Disables closing MDBDatepicker on escape <MDBDatepicker view='months' />