Datepicker

Datepicker - Bootstrap 5 & Material Design 2.0

Bootstrap 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

Example label


                      
                        
                        Example label

Inline version

Example label


                        
                          
                          Example label

Translations

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

Example label


                      
                        
                        Example label


                      var datepickerTranslated = document.querySelector('.datepicker-translated');
                      new mdb.Datepicker(datepickerTranslated, {
                      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.

Example label


                        
                          
                          Example label

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 options.

Example label


                        
                          
                          Example label


                      var datepickerWithLimits = document.querySelector('.datepicker-with-limits'); new
                      mdb.Datepicker(datepickerWithLimits, {
                      min: new Date(2020, 5, 10),
                      max: new Date(2022, 5, 20)
                      });

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.

Example label


                      
                        
                        Example label


                      var datepickerWithFilter = document.querySelector('.datepicker-with-filter');

                      function filterFunction(date) {
                      var isSaturday = date.getDay() === 6;
                      var isSunday = date.getDay() === 0;
                      var isBeforeToday = date < new Date(); return isSaturday || isSunday || isBeforeToday; } new
                        mdb.Datepicker(datepickerWithFilter, { filter: filterFunction });

Input toggle

Add data-mdb-toggle="datepicker" to the input element to enable toggling on input click. It is also possible to set toggleButton option to false to remove the toggle button.

Example label


                        
                          
                          Example label

Custom toggle icon

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

Example label


                        
                          
                          Example label

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',
                        selectMonthLabel: 'Select a month',
                        selectYearLabel: 'Select a year',
                        switchToMultiYearViewLabel: 'Choose year and month',
                        switchToMonthViewLabel: 'Choose date',
                        switchToDayViewLabel: 'Choose date',

Datepicker - API

Usage

Via class


                    
                      
                      Example label

Via JavaScript


                    var options = {
                    format: 'dd-mm-yyyy'
                    }
                    var myDatepicker = new mdb.Datepicker(document.getElementById('myDatepicker'), options)

Options

Name	Type	Default	Description
`cancelBtnLabel`	String	`'Cancel selection'`	Changes cancel button aria label
`cancelBtnText`	String	`'Cancel'`	Changes cancel button text
`clearBtnLabel`	String	`'Clear selection'`	Changes clear button aria label
`clearBtnText`	String	`'Clear'`	Changes clear button text
`format`	String	`'dd/mm/yyyy'`	Changes date format displayed in input
`inline`	Boolean	`false`	Changes datepicker display mode to inline (dropdown)
`max`	Date	`-`	Changes max available date
`min`	Date	`-`	Changes min available date
`monthsFull`	Array	`[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ]`	Changes array of months full names
`monthsShort`	Array	`['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`	Changes array of months short names
`okBtnLabel`	String	`'Confirm selection'`	Changes ok button aria label
`nextMonthLabel`	String	`'Next month'`	Changes next button aria label in days view
`nextMultiYearLabel`	String	`'Next 24 years'`	Changes next button aria label in years view
`nextYearLabel`	String	`'Next year'`	Changes next button aria label in months view
`okBtnText`	String	`'Ok'`	Changes ok button text
`prevMonthLabel`	String	`'Previous month'`	Changes previous button aria label in days view
`prevMultiYearLabel`	String	`'Previous 24 years'`	Changes previous button aria label in years view
`prevYearLabel`	String	`'Previous year'`	Changes previous button aria label in months view
`switchToDayViewLabel`	String	`'Choose date'`	Changes view change button aria label in years view
`switchToMonthViewLabel`	String	`'Choose date'`	Changes view change button aria label in months view
`switchToMultiYearViewLabel`	String	`'Choose year and month'`	Changes view change button aria label in days view
`startDate`	Date	`-`	Changes default date to which datepicker will navigate
`title`	String	`'Select date'`	Changes datepicker title
`weekdaysFull`	Array	`['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`	Changes array of weekdays full names
`weekdaysNarrow`	Array	`['S', 'M', 'T', 'W', 'T', 'F', 'S']`	Changes array of weekdays narrow names
`weekdaysShort`	Array	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	Changes array of weekdays short names
`view`	String	`'days'`	Changes default datepicker view (days/years/months)

Methods

Name	Description	Example
`open`	Manually opens a datepicker	`myDatepicker.open()`
`close`	Manually closes a datepicker	`myDatepicker.close()`
`dispose`	Disposes a datepicker instance	`myDatepicker.dispose()`


                        var datepickerEl = document.getElementById('myDatepicker')
                        var datepicker = new mdb.Datepicker(myModalEl)
                        datepicker.open()

Events

Name	Description
`open.mdb.datepicker`	This event fires immediately when the datepicker is opened.
`close.mdb.datepicker`	This event fires immediately when the datepicker is closed.
`dateChange.mdb.datepicker`	This event fires immediately when the new date is selected.


                        var myDatepicker = document.getElementById('myDatepicker')
                        myDatepicker.addEventListener('open.mdb.datepicker', function (e) {
                        // do something...
                        })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


                    import { Datepicker } from 'mdb-ui-kit';