Bootstrap Datetimepicker无法与动态字段一起使用

Question

我有当前代码，即bootstrap datetimepicker Bootstrap 3 Datepicker ，当前存在的问题是，当我单击“添加更多字段”时，带有日期时间文本的带有文本字段的新div无法正常工作，任何想法可能是什么？

<script type="text/javascript">
    $(document).ready(function() {
        var max_fields      = 5; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div>\
                    <div class="input-group date datepicker_init">\
                        <input class="form-control" type="text" name="mytext[]">\
                        <span class="input-group-addon">\
                            <span class="glyphicon glyphicon-calendar"></span>\
                        </span>\
                    </div>\
                    <div class="input-group date datepicker_end">\
                        <input class="form-control" type="text" name="mytext[]">\
                        <span class="input-group-addon">\
                            <span class="glyphicon glyphicon-calendar"></span>\
                        </span>\
                    </div>\
                    <a href="#" class="remove_field red-color">Remove</a>\
                <div class="voffset10"></div>\
                </div>\
                ');
            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

$('.datepicker_init').datetimepicker({
    locale: 'es',
    format: 'YYYY-MM-DD HH:mm'
});

$('.datepicker_end').datetimepicker({
    locale: 'es',
    format: 'YYYY-MM-DD HH:mm',
    useCurrent: false
});

$(".datepicker_init").on("dp.change", function (e) {
    $('.datepicker_end').data("DateTimePicker").minDate(e.date);
});

$(".datepicker_end").on("dp.change", function (e) {
    $('.datepicker_init').data("DateTimePicker").maxDate(e.date);
});
});
</script>

<div class="form-group">
    <div class="input_fields_wrap">
        <button class="add_field_button btn btn-info btn-block voffset10">Add More Fields</button>
        <div>
            <div class='input-group date datepicker_init'>
                <input class="form-control" type="text" name="mytext[]">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <div class='input-group date datepicker_end'>
                <input class="form-control" type="text" name="mytext[]">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="voffset10">
    </div>
</div>

更新部分

    $(".datepicker_init").on("dp.change", function (e) {
        $('.datepicker_end').data("DateTimePicker").minDate(e.date);
    });

    $(".datepicker_end").on("dp.change", function (e) {
        $('.datepicker_init').data("DateTimePicker").maxDate(e.date);
    });

Answer 1

在添加新的html之后，立即在点击处理程序中调用datepicker初始化脚本，如下所示：

$(add_button).click(function(e){ 
    // on add input button click
    e.preventDefault();

    // max input box allowed
    // Reduce nesting!
    if(x >= max_fields){ 
        return
    }

    //text box increment
    x++; 
    var tmp = $(wrapper).append('<div>\
        <div class="input-group date datepicker_init">\
            <input class="form-control" type="text" name="mytext[]">\
            <span class="input-group-addon">\
                <span class="glyphicon glyphicon-calendar"></span>\
            </span>\
        </div>\
        <div class="input-group date datepicker_end">\
            <input class="form-control" type="text" name="mytext[]">\
            <span class="input-group-addon">\
                <span class="glyphicon glyphicon-calendar"></span>\
            </span>\
        </div>\
        <a href="#" class="remove_field red-color">Remove</a>\
    <div class="voffset10"></div>\
    </div>');

    // Init the new pickers
    $('.datepicker_init', tmp).datetimepicker({
        locale: 'es',
        format: 'YYYY-MM-DD HH:mm'
    });

    $('.datepicker_end', tmp).datetimepicker({
        locale: 'es',
        format: 'YYYY-MM-DD HH:mm',
        useCurrent: false
    });
});

Answer 2

首先，当$（document）.ready不在动态div创建时间中发生时，datetimepicker绑定就发生在div上，因为add_button click事件创建了这次未绑定datetimepicker的动态div。 因此，在创建动态div之后，您必须同时为此div绑定datetimepicker。 下面的更改可以帮助您了解-

将下面的代码放置到任何函数中，并同时在document.ready时间和div创建时间中调用此函数

function yourfunction(){
        $('.datepicker_init').datetimepicker({
            locale: 'es',
            format: 'YYYY-MM-DD HH:mm'
        }); 
        $('.datepicker_end').datetimepicker({
            locale: 'es',
            format: 'YYYY-MM-DD HH:mm',
            useCurrent: false
        });
    }

所以最后您的脚本看起来像这样

$(document).ready(function() {
        var max_fields      = 5; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div>\
                    <div class="input-group date datepicker_init">\
                        <input class="form-control" type="text" name="mytext[]">\
                        <span class="input-group-addon">\
                            <span class="glyphicon glyphicon-calendar"></span>\
                        </span>\
                    </div>\
                    <div class="input-group date datepicker_end">\
                        <input class="form-control" type="text" name="mytext[]">\
                        <span class="input-group-addon">\
                            <span class="glyphicon glyphicon-calendar"></span>\
                        </span>\
                    </div>\
                    <a href="#" class="remove_field red-color">Remove</a>\
                <div class="voffset10"></div>\
                </div>\
                ');
            }
            yourfunction();
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

        yourfunction();

        $(".datepicker_init").on("dp.change", function (e) {
            $('.datepicker_end').data("DateTimePicker").minDate(e.date);
        });

        $(".datepicker_end").on("dp.change", function (e) {
            $('.datepicker_init').data("DateTimePicker").maxDate(e.date);
        });
    });