Bootstrap Datetimepicker not working with dynamic field

Question

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

Answer 1

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

Answer 2

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