admin管理员组

文章数量:1431413

I have the current code which is the bootstrap datetimepicker Bootstrap 3 Datepicker, the current problem that i have is that when i click in "Add more fields" the new div with the fields which are text with the datetimerpicker aren't working, any ideas on what it could be?

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

UPDATED PART

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

I have the current code which is the bootstrap datetimepicker Bootstrap 3 Datepicker, the current problem that i have is that when i click in "Add more fields" the new div with the fields which are text with the datetimerpicker aren't working, any ideas on what it could be?

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

UPDATED PART

    $(".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);
    });
  • javascript
  • jquery
  • twitter-bootstrap
  • datetimepicker
  • bootstrap-datetimepicker
Share Improve this question edited Apr 2, 2016 at 17:39 Cesar Mtz asked Mar 9, 2016 at 8:24 Cesar MtzCesar Mtz 3222 silver badges13 bronze badges 1
  • not sure if this helps ... link – Leonz Commented Mar 9, 2016 at 8:37
Add a ment  | 

2 Answers 2

Reset to default 5

Call the datepicker init script inside the click handler, right after the new html is appended, like this:

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

First of all, your datetimepicker binding occurs on div when $(document).ready occur not in dynamic div creation time beacause add_button click event create your dynamic div which is not bind datetimepicker this time. so that, after creating dynamic div, you must be bind datetimepicker at the same time for this div. Below changes can help you to understand-

Place Your below code to any function and call this function in both time i.e in document.ready time and in div creation time

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
        });
    }

So finally your script looks like this

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

本文标签： javascriptBootstrap Datetimepicker not working with dynamic fieldStack Overflow

版权声明：本文标题：javascript - Bootstrap Datetimepicker not working with dynamic field - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745559402a2663380.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。