How to dynamically create bootstrap datepicker?

Question

I need to create a date picker dynamically using jQuery. In my form I will have button to create date picker.

Below is the code I tried so far:

<div id="examDatesContainer">
    <div class="form-group">
        <label for="examDate" class="col-sm-2 caption">
            <fmt:message key="exam.date"/>:<strong style="font-size:14px;" class="asterisk">*</strong>
        </label>
        <div class="col-sm-4">
            <div class="input-group date">
                <input type="datetime" class="form-control examDate" id="examDate" name="examDate" value="" readonly >
                <div class="input-group-addon" class="examDateCalendarIcon">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="form-group examDateTemplate" style="display: none;">
        <label for="examDate" class="col-sm-2 caption"></label>
        <div class="col-sm-4">
            <div class="input-group date">
                <input type="datetime" class="form-control examDate" name="examDate" value="" readonly >
                <div class="input-group-addon" class="examDateCalendarIcon">
                    <i class="fa fa-calendar"></i>
                </div>
                <div class="input-group-addon">
                    <i class="fa fa-minus-circle"></i>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="form-group">
    <label for="examDate" class="col-sm-2 caption">
    </label>
    <div class="col-sm-4">
        <button id="addExamDateBtn" type="button" class="btn btn-sm btn-primary">
            <span class="fa fa-plus"> &nbsp;</span>
            <fmt:message key="add"/>
        </button>
    </div>
</div>

and the JavaScript code is as below:

$("#addExamDateBtn").click(function(){
    var examDateClonedObj = $(".examDateTemplate").clone();
    $(examDateClonedObj).removeClass("examDateTemplate");
    $(examDateClonedObj).appendTo("#examDatesContainer");
    $(examDateClonedObj).show();
    $('.datepicker').datetimepicker('update');
});

$('.examDate').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    showTodayButton: true
});

Basically I show a single datepicker initially. Then I have a button to add more date pickers. Template for datepicker is hidden, on click of "add more" button I just clone it and add it to the DOM.

score 9 · Accepted Answer · answered Feb 25 '17 at 08:02

9

Use this code below

$('body').on('focus',".examDate", function(){
  $(this).datetimepicker({
   format: 'DD/MM/YYYY',
   ignoreReadonly: true,
   showTodayButton: true
 });
});

This way the dynamically created elements can also initialize the datetimepicker.

A working example is posted : Jsfiddle

answered Feb 25 '17 at 08:02

Abhijith s.s

416
3
8

This works. But, click on icon does not work for first time till u click on text field. Once you have clicked on the text field, then only the click on calendar icon works. – ajm Feb 25 '17 at 08:38

Alex · Answer 2 · 2020-12-16T10:17:44.013

$('body').on('DOMNodeInserted', function (e) {
    if (e.target.classList.contains('datepicker-container')) {
        $('.datepicker').datepicker({
            format: 'DD/MM/YYYY',
            ignoreReadonly: true,
            showTodayButton: true
        });
    }
})

Every time a datepicker-container (which obviously contains a datepicker) is added to the DOM, datepickers are initialized. This is how I solved this problem, hope this will help some in the future.

UPDATE

The use of DOMInsertedNode is now deprecated for some time. Instead, you could try something based on what follows, using MutationObservers.

new MutationObserver(function (mutations) {
    var selector = ".datepicker";
    // look through all mutations that just occured
    for (var i = 0; i < mutations.length; ++i) {
        // look through all added nodes of this mutation
        for (var j = 0; j < mutations[i].addedNodes.length; ++j) {
            var target = mutations[i].addedNodes[j];

            if (target && target.nodeType === Node.ELEMENT_NODE) {
                var children = $(target).find(selector);

                if (target.matches(selector)) {
                    $(target).datepicker({
                        format: 'DD/MM/YYYY',
                        ignoreReadonly: true,
                        showTodayButton: true
                    });
                }
                else if (children.length > 0) {
                    children.each(function () {
                        $(this).datepicker({
                            format: 'DD/MM/YYYY',
                            ignoreReadonly: true,
                            showTodayButton: true
                        });
                    });
                }
            }
        }
    }
}).observe(document.querySelector("body"), {
    childList: true,
    subtree: true
});

How to dynamically create bootstrap datepicker?

2 Answers2

Linked