Overview
Tempus Dominus is the successor to the very popular "eonasdan/bootstrap-datetimepicker". The plugin provides a wide array of options that allow developers to
provide date and or time selections to users as simple pickers, date of birth selection, appointments and more.
For full documentation please check the
plugin's site .
Usage
Tempus Dominus's CSS and Javascript files are bundled in the global plugin bundles and globally included in all pages:
copy <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>
Initialization
Tempus Dominus's CSS is highly customized in sass/vendors/plugins/_tempus-dominus.scss
SCSS file in order to use it as native component within the design system.
The SCSS code is compiled into assets/plugins/global/plugins.bundle.css
and globally included in all pages.
Tempus Dominus's Javascript is globally initialized with some predefined settings in src/js/vendors/plugins/tempus-dominus.init.js
and the initialization code is bundled within
assets/plugins/global/plugins.bundle.js
and globally included in all pages.
To start usin Tempus Dominus right away, check the official Getting Started guide.
Basic Example
This is the simplest setup you can have with Bootstrap and Font Awesome 6:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_basic"), {
//put your config here
});
<div class="input-group" id="kt_td_picker_simple" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_basic_input" type="text" class="form-control" data-td-target="#kt_td_picker_basic"/>
<span class="input-group-text" data-td-target="#kt_td_picker_basic" data-td-toggle="datetimepicker">
<i class="fas fa-calendar"></i>
</span>
</div>
This is the simplest setup you can have with Bootstrap and Font Awesome 6:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_button"), {
//put your config here
});
<button id="kt_td_picker_button" class="btn btn-flex btn-primary">
Pick date & time <i class="fa-solid fa-calendar fs-3 ms-3 me-0" aria-hidden="true"></i>
</button>
Localization
For localization support include a required localization in the Gulp config node_modules/@eonasdan/tempus-dominus/dist/js/locales/de.js
tools/gulp.config.js
or in the Webpack config tools/webpack/plugins/plugins.js
set locale: "de"
:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
localization: {
locale: "de",
startOfTheWeek: 1
}
});
<div class="input-group" id="kt_td_picker_localization" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input type="text" class="form-control" data-td-target="#kt_td_picker_localization"/>
<span class="input-group-text" data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
<i class="fas fa-calendar"></i>
</span>
</div>
Date Only
This is the simplest setup you can have with Bootstrap and Font Awesome 6:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_date_only"), {
display: {
viewMode: "calendar",
components: {
decades: true,
year: true,
month: true,
date: true,
hours: false,
minutes: false,
seconds: false
}
}
});
<div class="input-group" id="kt_td_picker_date_only" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_date_only_input" type="text" class="form-control" data-td-target="#kt_td_picker_date_only"/>
<span class="input-group-text" data-td-target="#kt_td_picker_date_only" data-td-toggle="datetimepicker">
<i class="fas fa-calendar"></i>
</span>
</div>
Time Only
This is the simplest setup you can have with Bootstrap and Font Awesome 6:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_time_only"), {
display: {
viewMode: "clock",
components: {
decades: false,
year: false,
month: false,
date: false,
hours: true,
minutes: true,
seconds: false
}
}
});
<div class="input-group" id="kt_td_picker_time_only" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_time_only_input" type="text" class="form-control" data-td-target="#kt_td_picker_time_only"/>
<span class="input-group-text" data-td-target="#kt_td_picker_time_only" data-td-toggle="datetimepicker">
<i class="fas fa-calendar"></i>
</span>
</div>
Linked Pickers
This is the simplest setup you can have with Bootstrap and Font Awesome 6:
copy const linkedPicker1Element = document.getElementById("kt_td_picker_linked_1");
const linked1 = new tempusDominus.TempusDominus(linkedPicker1Element);
const linked2 = new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_linked_2"), {
useCurrent: false,
});
//using event listeners
linkedPicker1Element.addEventListener(tempusDominus.Namespace.events.change, (e) => {
linked2.updateOptions({
restrictions: {
minDate: e.detail.date,
},
});
});
//using subscribe method
const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) => {
linked1.updateOptions({
restrictions: {
maxDate: e.date,
},
});
});
<div class="row">
<div class="col-sm-6">
<label for="kt_td_picker_linked_1_input" class="form-label">From</label>
<div class="input-group log-event" id="kt_td_picker_linked_1" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_linked_1_input" type="text" class="form-control" data-td-target="#kt_td_picker_linked_1"/>
<span class="input-group-text" data-td-target="#kt_td_picker_linked_1" data-td-toggle="datetimepicker">
<span class="fa-solid fa-calendar"></span>
</span>
</div>
</div>
<div class="col-sm-6">
<label for="kt_td_picker_linked_2_input" class="form-label">To</label>
<div class="input-group log-event" id="kt_td_picker_linked_2" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_linked_2_input" type="text" class="form-control" data-td-target="#kt_td_picker_linked_2"/>
<span class="input-group-text" data-td-target="#kt_td_picker_linked_2" data-td-toggle="datetimepicker">
<span class="fa-solid fa-calendar"></span>
</span>
</div>
</div>
</div>
Custom Icons
This is the simplest setup you can have with Bootstrap and Font Awesome 6:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_custom_icons"), {
display: {
icons: {
time: "bi bi-clock fs-1",
date: "bi bi-calendar fs-1",
up: "bi bi-arrow-up fs-1",
down: "bi bi-arrow-down fs-1",
previous: "bi bi-chevron-left fs-1",
next: "bi bi-chevron-right fs-1",
today: "bi bi-calendar-check fs-1",
clear: "bi bi-trash fs-1",
close: "bi bi-x fs-1",
},
buttons: {
today: true,
clear: true,
close: true,
},
}
});
<div class="input-group" id="kt_td_picker_custom_icons" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_custom_icons_input" type="text" class="form-control" data-td-target="#kt_td_picker_custom_icons"/>
<span class="input-group-text" data-td-target="#kt_td_picker_custom_icons" data-td-toggle="datetimepicker">
<i class="fas fa-calendar"></i>
</span>
</div>
Inline View
This is the simplest setup you can have with Bootstrap and Font Awesome 6:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_inline"), {
display: {
inline: true
}
});
<div id="kt_td_picker_inline"></div>
Multiple Dates
This is the simplest setup you can have with Bootstrap and Font Awesome 6:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_multiple_dates"), {
multipleDates: true
});
<div class="input-group" id="kt_td_picker_multiple_dates" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_multiple_dates_input" type="text" class="form-control" data-td-target="#kt_td_picker_multiple_dates"/>
<span class="input-group-text" data-td-target="#kt_td_picker_multiple_dates" data-td-toggle="datetimepicker">
<i class="fas fa-calendar"></i>
</span>
</div>
Modal Example
Use Datepicker within Bootstrap Modal:
copy new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_modal"), {
//put your config here
});
<!--begin::Modal-->
<div class="modal fade" tabindex="-1" id="kt_modal_1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x">
</span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<div class="input-group" id="kt_td_picker_modal" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_modal_input" type="text" class="form-control" data-td-target="#kt_td_picker_modal"/>
<span class="input-group-text" data-td-target="#kt_td_picker_modal" data-td-toggle="datetimepicker">
<i class="fas fa-calendar"></i>
</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--end::Modal-->