DateTimepicker

Bootstrap 5 DateTimepicker

DateTimepicker is a form that adds the function of selecting date and time without the necessity of using custom JavaScript code.

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

Basic example

Input with a modal for selecting a date and time.

Edit in sandbox 
        
            
          <div class="form-outline datetimepicker">
            <input type="text" class="form-control" value="22/12/2020, 14:12:56" id="datetimepickerExample" />
            <label for="datetimepickerExample" class="form-label">Select Date and Time</label>
          </div>

Inline version

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

Edit in sandbox 
        
            
        <div class="form-outline datetimepicker" data-mdb-inline="true" >
          <input type="text" class="form-control" id="datetimepickerInline" />
          <label for="datetimepickerInline" class="form-label">Select Date and Time</label>
        </div>

Disabled

Use data-mdb-disabled="true" attribute on DateTimepicker to give it a grayed out appearance and remove pointer events.

Edit in sandbox 
        
            
        <div class="form-outline datetimepicker" data-mdb-disabled="true">
          <input type="text" class="form-control" id="datetimepickerDisabled" />
          <label for="datetimepickerDisabled" class="form-label">Select Date and Time</label>
        </div>

Disable past

Use data-mdb-disable-past attribute to disallow selecting past dates.

Edit in sandbox 
        
            
        <div class="form-outline datetimepicker" data-mdb-disable-past="true">
          <input type="text" class="form-control" id="datetimepickerDisablePast" />
          <label for="datetimepickerDisablePast" class="form-label">Select Date and Time</label>
        </div>

Disable future

Use data-mdb-disable-future attribute to disallow selecting future dates.

Edit in sandbox 
        
            
        <div class="form-outline datetimepicker" data-mdb-disable-future="true">
          <input type="text" class="form-control" id="datetimepickerDisableFuture" />
          <label for="datetimepickerDisableFuture" class="form-label">Select Date and Time</label>
        </div>

Default values

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

Edit in sandbox 
        
            
        <div class="form-outline datetimepicker" data-mdb-default-date="22/01/2019" data-mdb-default-time="10:33 PM" >
          <input type="text" class="form-control" id="datetimepickerDefault" />
          <label for="datetimepickerDefault" class="form-label">Select Date and Time</label>
        </div>

Invalid label

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

Edit in sandbox 
        
            
        <div class="form-outline datetimepicker" data-mdb-invalid-label="Correct your input" >
          <input type="text" class="form-control" id="datetimepickerLabel" />
          <label for="datetimepickerLabel" class="form-label">Select Date and Time</label>
        </div>

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.

Edit in sandbox 
        
            
          <div class="form-outline datetimepicker" data-mdb-toggle-button="false">
            <input type="text" class="form-control" id="datetimepickerToggle" data-mdb-toggle="datetimepicker" />
            <label for="datetimepickerToggle" class="form-label">Select Date and Time</label>
          </div>

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.

Edit in sandbox 
        
            
            <div class="form-outline" id="datetimepicker-dateOptions">
              <input type="text" class="form-control" id="datetimepickerdateOptions" />
              <label for="datetimepickerdateOptions" class="form-label">Select Date and Time</label>
            </div>
          
        
    
        
            
            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.

Edit in sandbox 
        
            
            <div class="form-outline" id="datetimepicker-timeOptions">
              <input type="text" class="form-control" id="datetimepickertimeOptions" />
              <label for="datetimepickertimeOptions" class="form-label">Select Date and Time</label>
            </div>
          
        
    
        
            
            const pickerTimeOptions = document.querySelector('#datetimepicker-timeOptions');
            new mdb.Datetimepicker(pickerTimeOptions, { 
              timepicker: { format24: true },
            });

DateTimepicker - API

Usage

Via data attributes

Add datetimpicker class to selected wrapper with input. It will automatically initialize Datetimepicker using this element.

Edit in sandbox 
        
            
      <div class="form-outline datetimepicker">
        <input type="text" class="form-control" id="form1" />
        <label class="form-label" for="form1">Select a date and time</label>
      </div>

Via JavaScript

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

Edit in sandbox 
        
            
      const options = {
        datepicker: { format: 'dd-mm-yyyy' }
      }
      const myDatetimepicker = new mdb.Datetimepicker(document.getElementById('myDatetimepicker'), options)

Options

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

Name Type Default Description
appendValidationInfo Boolean true Adds validation info to the bottom of input.
container String 'body'

Allows to set the parent element for the datepicker and timepicker.
datepicker Object {} Allows to set datepicker options.
defaultDate String|Date|Number - Allows to set default date.
defaultTime String|Date|Number - Allows to set default time.
disabled Boolean false Set a disabled attribute to input in wrapper.
disablePast Boolean false Allows to disable the selection of the past time
disableFuture Boolean false Allows to disable the selection of the future time
inline Boolean false Allows to use a inline version of datetimepicker.
invalidLabel String 'Invalid Date or Time Format' Allows to set the value of invalid label.
showFormat Boolean false Adds placeholder with current format of datepicker.
timepicker Object - Allows to set timepicker options.
toggleButton Boolean true Allows to set the value of invalid label.

Methods

Name Description Example
dispose Disposes a datetimepicker instance myDatetimepicker.dispose()
getInstance Static method which allows you to get the datetimepicker instance associated to a DOM element. Datetimepicker.getInstance(datetimepickerEl)
getOrCreateInstance Static method which returns the datetimepicker instance associated to a DOM element or create a new one in case it wasn't initialized. Datetimepicker.getOrCreateInstance(datetimepickerEl)
update Updates options of a dateTimepicker instance. myDatetimepicker.update({inline: true})
Edit in sandbox 
        
            
            const datetimepickerEl = document.getElementById('myDatetimepicker')
            const datetimepicker = new mdb.Datetimepicker(datetimepickerEl)
            datetimepicker.dispose()

Events

Name Description
open.mdb.datetimepicker This event fires immediately when the datetimepicker is opened.
close.mdb.datetimepicker This event fires immediately when the datetimepicker is closed.
datetimeChange.mdb.datetimepicker This event fires immediately when the new input value is set.
Edit in sandbox 
        
            
            const myDatetimepicker = document.getElementById('myDatetimepicker')
            myDatetimepicker.addEventListener('open.mdb.datetimepicker', (e) => {
              // do something...
            })

Import

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

Edit in sandbox 
        
            
        import { Datepicker } from 'mdb-ui-kit';

CSS variables

Edit in sandbox 
        
            
        // .buttons-container
        --#{$prefix}datetimepicker-buttons-container-background-color: #{$datetimepicker-buttons-container-background-color};
        --#{$prefix}datetimepicker-button-toggle-width: #{$datetimepicker-button-toggle-width};
        --#{$prefix}datetimepicker-button-toggle-color: #{$datetimepicker-button-toggle-color};
        --#{$prefix}datetimepicker-button-toggle-font-size: #{$datetimepicker-button-toggle-font-size};
        --#{$prefix}datetimepicker-button-toggle-border-radius: #{$datetimepicker-button-toggle-border-radius};
        --#{$prefix}datetimepicker-button-toggle-min-height: #{$datetimepicker-button-toggle-min-height};
        --#{$prefix}datetimepicker-button-toggle-hover-background-color: #{$datetimepicker-button-toggle-hover-background-color};
        
        // .datetimepicker-toggle-button
        --#{$prefix}datetimepicker-toggle-button-transform: #{$datetimepicker-toggle-button-transform};

SCSS variables

Edit in sandbox 
        
            
        $datetimepicker-buttons-container-background-color: $primary;
        $datetimepicker-button-toggle-width: 50%;
        $datetimepicker-button-toggle-color: white;
        $datetimepicker-button-toggle-font-size: 23px;
        $datetimepicker-button-toggle-border-radius: 10px;
        $datetimepicker-button-toggle-min-height: 40px;
        $datetimepicker-button-toggle-hover-background-color: rgba(0, 0, 0, 0.15);
        $datetimepicker-toggle-button-transform: translate(-50%, -50%);