Question

我需要使用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。

Answer 1

使用以下代码

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

这样，动态创建的元素也可以初始化datetimepicker。

发布了一个工作示例：Jsfiddle

Answer 2

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

每次将datepicker容器（显然包含datepicker）添加到DOM时，都会初始化datepicker。这就是我解决此问题的方式，希望对将来有所帮助。

如何动态创建bootstrap datepicker？

2 个答案: