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.
Inline version
You can use inline version with option data-mdb-inline
.
Disabled
Use data-mdb-disabled="true"
attribute on DateTimepicker to give it a grayed out appearance and remove pointer events.
Disable past
Utilize the data-mdb-disable-past
attribute to prevent the selection of dates that have already occurred.
Disable future
Utilize the data-mdb-disable-future
attribute to prevent the selection of future dates.
Default values
You can set default date and time with options defaultDate
and
defaultTime
.
Invalid label
Add data-mdb-ivalid-label
with specified value, to change the invalid label
message.
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.
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.
Timepicker options
Note: This options works only with JS initialization.
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.
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.
Via JavaScript
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})
|
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. |