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.

        
            
            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.

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

Translations

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

        
            
            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.

        
            
            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. 

        
            
            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)}
                />
              );
            }

Disable past

Use the disablePast option to disallow past date selection. 

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

Disable future

Use the disableFuture option to disallow past date selection. 

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

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. 

        
            
            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. 

        
            
            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. 

        
            
            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: 

        
            
            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

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

Properties

MDBDatepicker

Name Type Default Description Example
cancelBtnText React.ReactNode 'CANCEL' Change cancel button text. <MDBDatepicker cancelBtnText='QUIT' />
clearBtnText React.ReactNode 'CLEAR' Change clear button text. <MDBDatepicker clearBtnText='RESET' />
closeOnEsc boolean true Disable closing MDBDatepicker on escape. <MDBDatepicker closeOnEsc={false} />
customIcon string 'far fa-calendar' Change default icon. <MDBDatepicker customIcon='fas fa-calendar' />
defaultValue string '' Default value of MDBDatepicker. <MDBDatepicker defaultValue='13/04/2023' />
disableFuture boolean false Disables selection of future dates. <MDBDatepicker disableFuture />
disablePast boolean false Disables selection of past dates. <MDBDatepicker disablePast />
format string 'dd/mm/yyyy' Change date format displayed in input. <MDBDatepicker format='dd-mm-yyyy' />
inline boolean false Change datepicker display mode to inline (dropdown). <MDBDatepicker inline />
inputToggle boolean false Turn on MDBDatepicker on input focus. <MDBDatepicker inputToggle />
inputLabel React.ReactNode 'Select a date' Change default label. <MDBDatepicker inputLabel='Pick date' />
max Date - Change max available date. <MDBDatepicker max={new Date(2021, 10, 14)}/>
min Date - Change min available date. <MDBDatepicker min={new Date(2020, 5, 10)} />
monthsFull string[] [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ] Change months full names. <MDBDatepicker monthsFull={customMonthsFull} />
monthsShort string[] ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Change months short names. <MDBDatepicker monthsShort={customMonthsShort} />
okBtnText ReactNode 'Ok' Change button text in DatepickerFooter. <MDBDatepicker okBtnText='Accept' />
startDay number 0 Change default start day (0 for Sunday, 1 for Monday...). <MDBDatepicker startDay={1} />
title string 'Select date' Change datepicker title. <MDBDatepicker title='Datepicker' />
value string - Add value property to change value of the datepicker from outside the component. <MDBDatepicker value={datepickerValue} onChange={(date) => setDatepickerValue(date)} />
views 'days' | 'months' | 'years' 'days' Set default view. <MDBDatepicker views='months' />
weekdaysFull string[] ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Change weekdays full names. <MDBDatepicker weekdaysFull={customWeekdaysFull} />
weekdaysNarrow string[] ['S', 'M', 'T', 'W', 'T', 'F', 'S'] Change weekdays narrow names. <MDBDatepicker weekdaysNarrow={customWeekdaysNarrow} />
weekdaysShort string[] ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Change weekdays short names. <MDBDatepicker weekdaysShort={customWeekdaysShort} />
wrapperClass string '' Add custom class to the MDBDatepicker wrapper element. <MDBDatepicker wrapperClass="class" />

Methods

Name Type Description
filter (date: Date) => boolean Defines filter function for MDBDatepicker

Events

Name Type Description
onChange (value: string, date: Date) => void This event fires immediately when the new date is selected.
onClose () => void This event fires immediately when the datepicker is closed.
onOpen () => void This event fires immediately when the datepicker is opened.