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

Required ES init: Datetimepicker *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Input with a modal for selecting a date and time.

Edit in sandbox 
<div class="form-outline" data-mdb-datetimepicker-init data-mdb-input-init>
  <input type="text" class="form-control" value="22/12/2020, 11:12 PM" id="datetimepickerExample" />
  <label for="datetimepickerExample" class="form-label">Select Date and Time</label>
</div>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Datetimepicker, Input });

Inline version

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

Edit in sandbox 
<div class="form-outline" data-mdb-datetimepicker-init data-mdb-input-init data-mdb-inline="true" >
  <input type="text" class="form-control" id="datetimepickerInline" />
  <label for="datetimepickerInline" class="form-label">Select Date and Time</label>
</div>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Datetimepicker, Input });

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" data-mdb-datetimepicker-init data-mdb-input-init data-mdb-disabled="true">
  <input type="text" class="form-control" id="datetimepickerDisabled" />
  <label for="datetimepickerDisabled" class="form-label">Select Date and Time</label>
</div>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Datetimepicker, Input });

Disable past

Utilize the data-mdb-disable-past attribute to prevent the selection of dates that have already occurred.

Edit in sandbox 
<div class="form-outline" data-mdb-datetimepicker-init data-mdb-input-init 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>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Datetimepicker, Input });

Disable future

Utilize the data-mdb-disable-future attribute to prevent the selection of future dates.

Edit in sandbox 
<div class="form-outline" data-mdb-datetimepicker-init data-mdb-input-init 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>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Datetimepicker, Input });

Default values

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

Edit in sandbox 
<div class="form-outline" data-mdb-datetimepicker-init data-mdb-input-init 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>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Datetimepicker, Input });

Invalid label

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

Edit in sandbox 
<div class="form-outline" data-mdb-datetimepicker-init data-mdb-input-init 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>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Datetimepicker, Input });

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" data-mdb-datetimepicker-init data-mdb-input-init 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>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Datetimepicker, Input });

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" data-mdb-input-init>
  <input type="text" class="form-control" id="datetimepickerdateOptions" />
  <label for="datetimepickerdateOptions" class="form-label">Select Date and Time</label>
</div>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

const pickerDateOptions = document.querySelector('#datetimepicker-dateOptions');
new Datetimepicker(pickerDateOptions, {
  datepicker: { format: 'dd-mm-yyyy'},
});
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" data-mdb-input-init>
  <input type="text" class="form-control" id="datetimepickertimeOptions" />
  <label for="datetimepickertimeOptions" class="form-label">Select Date and Time</label>
</div>
// Initialization for ES Users
import { Datetimepicker, Input, initMDB } from "mdb-ui-kit";

initMDB({ Input });

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

DateTimepicker - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
import { Datetimepicker, initMDB } from "mdb-ui-kit";
initMDB({ Datetimepicker });
import "mdb-ui-kit"

Usage

Via data attributes

Using the Datetimepicker component doesn't require any additional JavaScript code - simply add data-mdb-datetimepicker-init attribute to .form-outline, and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

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

Via JavaScript

Edit in sandbox 
const options = {
  datepicker: { format: 'dd-mm-yyyy' }
};
const myDatetimepicker = new Datetimepicker(document.getElementById('myDatetimepicker'), options);
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-container="body".

Name Type Default Description
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.
showFormat Boolean false Adds placeholder with current format of datepicker.
timepicker Object {} Allows to set timepicker options.
toggleButton Boolean true Allows adding a toggle button to the input. Setting it to false makes the input act as a toggle.

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 Datetimepicker(datetimepickerEl);
datetimepicker.dispose();
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.
valueChanged.mdb.datetimepicker This event fires immediately when datetimepicker value is changed.
Edit in sandbox 
const myDatetimepicker = document.getElementById('myDatetimepicker')
myDatetimepicker.addEventListener('open.mdb.datetimepicker', (e) => {
  // do something...
})

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: var(--#{$prefix}picker-header-bg);
$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%);