javascript - Bootstrap Datetimepicker not working with dynamic field

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

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

Share Improve this question edited Apr 2, 2016 at 17:39 asked Mar 9, 2016 at 8:24 Cesar Mtz 3222 silver badges13 bronze badges

not sure if this helps ... link – Leonz Commented Mar 9, 2016 at 8:37

Add a ment |

2 Answers 2

Sorted by: 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);
        });
    });

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745559404a4633014.html

javascript - Bootstrap Datetimepicker not working with dynamic field - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Bootstrap Datetimepicker not working with dynamic field - Stack Overflow

2 Answers 2

相关推荐