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
*
*
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.
<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
.
<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.
<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.
<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.
<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
.
<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.
<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.
<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.
<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.
<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.
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.
<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
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})
|
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. |
const myDatetimepicker = document.getElementById('myDatetimepicker')
myDatetimepicker.addEventListener('open.mdb.datetimepicker', (e) => {
// do something...
})
CSS variables
// .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
$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%);