Logo

Documentation v8.2.5

  • Home
  • Tempus Dominus Datepicker
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.scssSCSS file in order to use it as native component within the design system. The SCSS code is compiled into assets/plugins/global/plugins.bundle.cssand globally included in all pages.
  • Tempus Dominus's Javascript is globally initialized with some predefined settings in src/js/vendors/plugins/tempus-dominus.init.jsand the initialization code is bundled within assets/plugins/global/plugins.bundle.jsand 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="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></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 flex-center btn-primary">
    Pick date & time 
    <i class="ki-duotone ki-calendar-8 fs-2 ms-3 pe-0"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i>
</button>

Localization

For localization support include a required localization in the Gulp config node_modules/@eonasdan/tempus-dominus/dist/locales/de.js tools/gulp.config.jsor in the Webpack config tools/webpack/plugins/plugins.jsset locale: "de":
new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
    localization: {
        locale: "de",
        startOfTheWeek: 1,
        format: "dd/MM/yyyy"
    }
});

<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="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></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="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></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="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></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">
                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
            </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">
                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
            </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: "ki-outline ki-time fs-1",
        date: "ki-outline ki-calendar fs-1",
        up: "ki-outline ki-up fs-1",
        down: "ki-outline ki-down fs-1",
        previous: "ki-outline ki-left fs-1",
        next: "ki-outline ki-right fs-1",
        today: "ki-outline ki-check fs-1",
        clear: "ki-outline ki-trash fs-1",
        close: "ki-outline ki-cross 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="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></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="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></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">
                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                </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="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></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-->