Logo

Documentation v8.1.7

Downloads Preview
Light
Dark
System

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

Button Example

This is the simplest setup you can have with Bootstrap and Font Awesome 6: 
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": 
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: 
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: 
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: 
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: 
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: 
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: 
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: 
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-->
Preview Get Help Buy Now