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

Select Date and Time

Inline version

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

Select Date and Time

Disabled

Select Date and Time

Default values

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

Select Date and Time

Invalid label

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

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

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

Timepicker options

Note: This options works only with JS initialization.

Select Date and Time

DateTimepicker - 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 datetimpicker to your selected wrapper with input. It automaticly set datetimepicker to this element. Datetimepicker will be toggling with click event on this container.

HTML


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

JavaScript


      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.
`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.
`formatDate`	String	`'dd/mm/yyyy'`	Changes the format of date.
`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)`

javascript


            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.

javascript


            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:

JavaScript


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