datepicker used in textbox inside script

Question

when I use date picker in text box outside script it works fine, iwhich looks like this.

<input type="text" id="entry_date" name="entry_date[]"  class="form-control datepicker" data-date-format="<?= config_item('date_picker_format'); ?>"  value=""/>

But when I use same date picker function inside script it's not working and I don't know whether it will work like this what the way I gave.Here is my code

<script type="text/javascript">
$(document).ready(function () {
 $(function () {    
        $("#datepicker1").datepicker();
    });

var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div  class="form-group"><input  class="form-control date_pick datepicker col-lg-2" id="datepicker1" placeholder="yyyy-mm-dd" type="text" name="entry_date[]" value=""/></div>'; //New input field html 


var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
    if(x < maxField){ //Check maximum number of input fields
        x++; //Increment field counter
        $(wrapper).append(fieldHTML); // Add field html
    }
});

});
</script>

Can You please explain to me howI should call this date picker?

Thank You

Answer 1

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> <button class="add_button">Add</button> <div class="field_wrapper"></div> <script type="text/javascript"> $(document).ready(function () { var maxField = 10; //Input fields increment limitation var addButton = $('.add_button'); //Add button selector var wrapper = $('.field_wrapper'); //Input field wrapper var fieldHTML = ''; //New input field html var x = 1; //Initial field counter is 1 $(addButton).click(function(){ //Once add button is clicked if(x < maxField){ //Check maximum number of input fields x++; //Increment field counter fieldHTML = '<div class="form-group"><input class="form-control date_pick datepicker col-lg-2" id="datepicker' + x + '" placeholder="yyyy-mm-dd" type="text" name="entry_date[]" value=""/></div>'; $(wrapper).append(fieldHTML); // Add field html $("#datepicker" + x).datepicker(); } }); }); </script> 

Answer 2

Check html appended properly, or put html code separate to jquery, maybe using jquery code appended lately when datepicker function work.

Regards,