Date and Time Picker

Datetimepicker - Bootstrap 5 & Material Design 2.0 components

Use MDB custom Datetimepicker component to select date and time.

Note: Read the API tab to find all available options and advanced customization

Basic example

Select Date and Time


          
            
            Select Date and Time

Inline version

You can use inline version with option data-mdb-inline.

Select Date and Time


        
          
          
            Select Date and Time

Disabled

Select Date and Time


        
          
          
            Select Date and Time

Default values

You can set default date and time with options defaultDate and defaultTime.

Select Date and Time


        
          
          
            Select Date and Time

Invalid label

Add data-mdb-ivalid-label with specified value, to change the invalid label message.

Select Date and Time


        
          
          
            Select Date and Time

Input toggle

Add data-mdb-toggle="datetimepicker" 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.

Select Date and Time


          
            
            Select Date and Time

Custom date and time options

Use datepicker or timepicker option to set custom options from our Datepicker and Timepicker components.

Datepicker options

Note: This options works only with JS initialization.

Select Date and Time


            
              
              
                Select Date and Time


            const pickerDateOptions = document.querySelector('#datetimepicker-dateOptions');
            new mdb.Datetimepicker(pickerDateOptions, { 
                datepicker: { format: 'dd-mm-yyyy'},
            });

Timepicker options

Note: This options works only with JS initialization.

Select Date and Time


            
              
              
                Select Date and Time


            const pickerTimeOptions = document.querySelector('#datetimepicker-timeOptions');
            new mdb.Datetimepicker(pickerTimeOptions, { 
                timepicker: { format24: true },
            });

Date Time Picker - API

Usage

Via data attributes or JavaScript, the datetimepicker plugin allows to select a date and time and show it on the selected output.

Via classes

Add class datetimpicer to your selected wrapper with input. It automaticly set datetimepicker to this element. Datetimepicker will be toggling with click event on this container.


                    
                      
                      Select a date and time

Via data attributes

Add data-toggle="datetimepicker" to a input or selected element like button.


                    
                      
                      Select a date and time

Via JavaScript

Via JavaScript plugin required a class or ID wrapper element with datetimepicker class.


                    var myDatetimepicker = new mdb.Datetimepicker(document.getElementById('wrapper-id'))

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-datetimepicker-, as in data-datetimepicker-inline.

Name	Type	Default	Description
disabled	boolean	false	Set a disabled attribute to input in wrapper
inline	boolean	false	Allows to use a inline version of timepicker
defaultDate	string\|date\|number	'22/11/2020'	Allows to set default date
defaultTime	string\|date\|number	'1:56 AM'	Allows to set default time
datepicker	object	{ format: 25-12-2020 }	Allows to set datepicker options
timepicker	object	{ format24: true }	Allows to set timepicker options

Methods

Name	Description	Example
`dispose`	Destroy datetimepicker with this method	`datetimepicker.dispose()`