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.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBDatepicker  />
              );
            }

Inline version

Use the data-mdb-inline="true" attribute to initialize and set the default date for an inline datepicker inside a block element.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [datepickerInline, setDatepickerInline] = useState('');
              
              return (
                <MDBDatepicker inline />
              );
            }

Translations

The picker can be customized to add support for internationalization. Modify the component options to add translations.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {       
              return (
                <MDBDatepicker
                  title='Datum auswählen'
                  monthsFull={[
                    'Januar',
                    'Februar',
                    'März',
                    'April',
                    'Mai',
                    'Juni',
                    'Juli',
                    'August',
                    'September',
                    'Oktober',
                    'November',
                    'Dezember',
                  ]}
                  monthsShort={['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']}
                  weekdaysFull={['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']}
                  weekdaysShort={['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam']}
                  weekdaysNarrow={['S', 'M', 'D', 'M', 'D', 'F', 'S']}
                  okBtnText='Ok'
                  clearBtnText='Klar'
                  cancelBtnText='Schließen'
                />
              );
            }

Formats

Use format option to display date in a human-friendly format.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {    
              return (
                <MDBDatepicker format='dd, mm, yyyy' />
              );
            }

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.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {      
              return (
                <MDBDatepicker
                  min={new Date(2020, 5, 10)}
                  max={new Date(2022, 5, 20)}
                />
              );
            }

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.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {        
              return (
                <MDBDatepicker
                  filter={function filterFunction(date: Date) {
                    const isSaturday = date.getDay() === 6;
                    const isSunday = date.getDay() === 0;
    
                    if (isSaturday || isSunday) {
                      return false;
                    }
                  }}
                />
              );
            }

Input toggle

Add toggleInput property to the input element to enable toggling on input click.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBDatepicker inputToggle  />
              );
            }

Custom toggle icon

You can customize the toggle icon by adding a toggle button template to the property.

Select a date

Show code

        
            
            import React} from 'react';
            import { MDBDatepicker, MDBIcon } from 'mdb-react-ui-kit';
    
            export default function App() {       
              return (
                <MDBDatepicker icon='fas fa-calendar' />
              );
            }

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:

Show code

        
            
            okBtnLabel: 'Confirm selection',
            clearBtnLabel: 'Clear selection',
            cancelBtnLabel: 'Cancel selection',
            nextMonthLabel: 'Next month',
            prevMonthLabel: 'Previous month',
            nextYearLabel: 'Next year',
            prevYearLabel: 'Previous year',
            nextMultiYearLabel: 'Next 24 years',
            prevMultiYearLabel: 'Previous 24 years',
            switchToMultiYearViewLabel: 'Choose year and month',
            switchToMonthViewLabel: 'Choose date',
            switchToDayViewLabel: 'Choose date',

Datepicker - API

Import

Show code

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

Properties

MDBDatepicker

Name	Type	Default	Description	Example
`cancelBtnText`	React.ReactNode	`'CANCEL'`	Changes cancel button text	`<MDBDatepicker cancelBtnText='QUIT' />`
`className`	string	`''`	Add custom class to the `MDBDatepicker`	`<MDBDatepicker className="class" />`
`clearBtnText`	React.ReactNode	`'CLEAR'`	Changes clear button text	`<MDBDatepicker clearBtnText='RESET' />`
`closeOnEsc`	boolean	`true`	Disables closing `MDBDatepicker` on escape	`<MDBDatepicker closeOnEsc={false} />`
`defaultValue`	string	`''`	Default value of `MDBDatepicker`	`<MDBDatepicker defaultValue='13/04/2023' />`
`format`	string	`'dd/mm/yyyy'`	Changes date format displayed in input	`<MDBDatepicker format='dd-mm-yyyy' />`
`icon`	string	`'far fa-calendar'`	Changes default icon	`<MDBDatepicker icon='fas fa-calendar' />`
`inline`	boolean	`false`	Changes datepicker display mode to inline (dropdown)	`<MDBDatepicker inline />`
`inputToggle`	boolean	`false`	Turn on `MDBDatepicker` on input focus	`<MDBDatepicker inputToggle />`
`inputClasses`	string	`''`	Classes of the datepicker input	`<MDBDatepicker inputClasses='test' />`
`inputLabel`	string	`'Select a date'`	Changes default label	`<MDBDatepicker inputLabel='Pick date' />`
`inputStyle`	React.CSSProperties	`undefined`	Styles of the datepicker input	`<MDBDatepicker inputStyle={{color: 'red'}} />`
`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`	string[]	`[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ]`	Changes string[] of months full names	`<MDBDatepicker monthsFull={customMonthsFullstring[]} />`
`monthsShort`	string[]	`['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`	Changes string[] of months short names	`<MDBDatepicker monthsShort={customMonthsShortstring[]} />`
`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' />`
`views`	'days' \| 'months' \| 'years'	`'days'`	Default view of the Datepicker	`<MDBDatepicker views='months' />`
`weekdaysFull`	string[]	`['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`	Changes string[] of weekdays full names	`<MDBDatepicker weekdaysFull={weekdaysFullstring[]} />`
`weekdaysNarrow`	string[]	`['S', 'M', 'T', 'W', 'T', 'F', 'S']`	Changes string[] of weekdays narrow names	`<MDBDatepicker weekdaysNarrow={weekdaysNarrowstring[]} />`
`weekdaysShort`	string[]	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	Changes string[] of weekdays short names	`<MDBDatepicker weekdaysShort={weekdaysShortstring[]} />`

Methods

Name	Type	Default	Description	Example
`filter`	(date: Date) => any	`-`	Defines filter function for `MDBDatepicker`	`<MDBDatepicker filter={filterFunction} />`
`onChange`	(value: string, date: Date) => void	`-`	Returns string value, or date value on input change	`<MDBDatepicker onChange={handleDatepicker} />`