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

        
            
            import React, { useState } from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [datepickerValue, setDatepickerValue] = useState('');

              return (
                <MDBDatepicker value={datepickerValue} setValue={setDatepickerValue}  />
              );
            }
          
        
    

Inline version

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

Translations

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

        
            
            import React, { useState } from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [datepickerTranslate, setDatepickerTranslate] = useState('');
              
              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'
                  value={datepickerTranslate}
                  setValue={setDatepickerTranslate}
                />
              );
            }
          
        
    

Formats

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

        
            
            import React, { useState } from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [datepickerFormat, setDatepickerFormat] = useState('');
              
              return (
                <MDBDatepicker format='dd, mm, yyyy' value={datepickerFormat} setValue={setDatepickerFormat}  />
              );
            }
          
        
    

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, { useState } from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [datepickerMinMax, setDatepickerMinMax] = useState('');
              
              return (
                <MDBDatepicker
                  min={new Date(2020, 5, 10)}
                  max={new Date(2022, 5, 20)}
                  value={datepickerMinMax}
                  setValue={setDatepickerMinMax}
                />
              );
            }
          
        
    

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.

        
            
            import React, { useState } from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [datepickerFilter, setDatepickerFilter] = useState('');
              
              return (
                <MDBDatepicker
                  value={datepickerFilter}
                  setValue={setDatepickerFilter}
                  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, { useState } from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [datepickerToggle, setDatepickerToggle] = useState('');
              
              return (
                <MDBDatepicker inputToggle value={datepickerToggle} setValue={setDatepickerToggle}  />
              );
            }
          
        
    

Custom toggle icon

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

        
            
            import React, { useState } from 'react';
            import { MDBDatepicker, MDBIcon } from 'mdb-react-ui-kit';
    
            export default function App() {
              const [datepickerIcon, setDatepickerIcon] = useState('');
              
              return (
                <MDBDatepicker icon={<MDBIcon fas icon='calendar' />} value={datepickerIcon} setValue={setDatepickerIcon}  />
              );
            }
          
        
    

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:

        
            
            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 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} />
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' />