Как динамически создавать загрузчик datepicker?

Мне нужно динамически создать средство выбора даты с помощью jQuery. В моей форме у меня будет кнопка для создания выбора даты.

Ниже приведен код, который я пробовал до сих пор:

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

и код JavaScript выглядит следующим образом:

$("#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
});

В основном я показываю один DatePicker изначально. Затем у меня есть кнопка, чтобы добавить больше средств выбора даты. Шаблон для средства выбора даты скрыт, при нажатии кнопки «добавить еще» я просто клонирую его и добавляю в DOM.


twitter-bootstrap bootstrap-datetimepicker
person ashishjmeshram    schedule 25.02.2017    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Используйте этот код ниже

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

Таким образом, динамически создаваемые элементы также могут инициализировать средство выбора даты и времени.

Опубликован рабочий пример: Jsfiddle

person Abhijith s.s    schedule 25.02.2017
comment
Это работает. Но щелчок по значку не работает в первый раз, пока вы не нажмете на текстовое поле. После того, как вы нажали на текстовое поле, работает только щелчок по значку календаря. - person ashishjmeshram; 25.02.2017

arrow_upward
1
arrow_downward 

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

Каждый раз, когда контейнер средства выбора даты (который, очевидно, содержит средство выбора даты) добавляется в DOM, средства выбора даты инициализируются. Вот как я решил эту проблему, надеюсь, это поможет некоторым в будущем.

ОБНОВЛЕНИЕ

Использование DOMInsertedNode на некоторое время не рекомендуется. Вместо этого вы можете попробовать что-нибудь из следующего, используя 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
});
person Alex    schedule 04.07.2018