bootstrap datepicker not working if it is cloned

Question

By using jquery clone() i am repeating div section of my document. This div also contains bootstrap datepicker. But, cloned div's datepicker won't work. I am using this datepicker https://eonasdan.github.io/bootstrap-datetimepicker/

Note: In code snippet add multiple files in choose file option then only you will see extra datepicker's.

 /* Depending on number of documents description box and datepicker will repeat */ $("#docsUpload").change(function() { $("#multiShow").empty(); // removes child elements var ele = document.getElementById($(this).attr('id')); var result = ele.files; var ff = result[0]; $("#ff").html("<strong> File Name : </strong>"+ ff.name); for(var x = 0;x< result.length-1;x++){ var fle = result[x+1]; $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>"); $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name); $('#multiShow').append("</div><div class='col-sm-3'></div></div>"); $("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow'); } }); /* depending on selection box type of date changes */ $(document).ready(function(){ $(".static").show(); // always display on page load $(".period").on('change',function(changeEvent){ //selection box value changed // var realId = $(".period").closest("div[id]").attr("id"); //get id var realId = $(changeEvent.target).closest("div[id]").attr("id"); $('#'+realId+' .dateSelector').hide(); //alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll' var operation = '.'+this.value; $('#'+realId+' '+operation).show(); }); // on period change }); // document ready state /* Format of datepicker */ $(document).ready(function(){ $('.datetimepicker1').datetimepicker({ format : "DD/MM/YYYY" }); $('.datetimepicker2').datetimepicker({ format : "MM/YYYY" }); $('.datetimepicker3').datetimepicker({ format : 'YYYY' }); $('.datetimepicker5').datetimepicker({ format : 'YYYY' }); $('.datetimepicker7').datetimepicker({ format : 'YYYY' }); $('.datetimepicker9').datetimepicker({ format : "DD/MM/YYYY" }); $('.datetimepicker10').datetimepicker({ format : "DD/MM/YYYY" }); }); 

 .dateSelector{ display: none; } h1{ color:#2F4F4F; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script> <div class="container-fluid"> <form name="dataSubmit" action="<?php echo base_url('client/store'); ?>" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()"> <hr/> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="form-group has-feedback"> <label for="upload">Upload Files : </label> <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" /> </div> </div> <div class="col-sm-3"></div> </div><!-- .row --> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="form-group has-feedback"> <span id="ff"></span> </div> </div> <div class="col-sm-3"></div> </div><!-- .row --> <div id="selectAll"> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="form-group has-feedback"> <input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" /> </div> </div> <div class="col-sm-3"></div> </div><!-- .row --> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="form-group"> <label for="upload"> Select Type & Date of document below: </label> </div> </div> <div class="col-sm-3"></div> </div> <!-- .row --> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-2"> <div class="form-group"> <select name="period" class="period"> <option value="static" selected="selected">Static</option> <option value="monthly">Monthly</option> <option value="quaterly">Quaterly</option> <option value="semester">Semester</option> <option value="yearly">Yearly</option> <option value="other">Other</option> </select> </div> </div> <!-- begin : datepicker --> <div class="col-sm-4 dateSelector static"> <div class="input-group date datetimepicker1"> <input type="text" name="staticDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> <div class="col-sm-4 dateSelector monthly"> <div class="input-group date datetimepicker2"> <input type="text" name="monthlyDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> <div class="dateSelector quaterly"> <div class="col-sm-2"> <select name="periodQuater[]"> <option value="first">January - March</option> <option value="second">April - June</option> <option value="third">July - September</option> <option value="fourth">October - December</option> </select><br/><br/> </div> <div class="col-sm-2"> <div class="input-group date datetimepicker3"> <input type="text" name="quaterlyDate" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> </div> <div class="dateSelector semester"> <div class="col-sm-2"> <select name="periodSemester[]"> <option value="semfirst">April - September </option> <option value="semsecond">October - March</option> </select><br/><br/> </div> <div class="col-sm-2"> <div class="input-group date datetimepicker5"> <input type="text" name="semesterDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> </div> <div class="dateSelector yearly"> <div class="col-sm-2"> <div class="input-group date datetimepicker7"> <input type="text" name="yearDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> </div> <div class="dateSelector other"> <div class="col-sm-2"> <div class="input-group date datetimepicker9"> <input type="text" name="otherDateF[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> <br/></div> <div class="col-sm-2"> <div class="input-group date datetimepicker10"> <input type="text" name="otherDateS[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div></div> </div> <div class="col-sm-3"></div> </div> <!-- .row for selector--> </div> <!-- #selectAll --> <div id="multiShow"> </div> <!-- end : datepicker --> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6 form-group"> <br/> <button type="submit" class="btn btn-primary form-control"> Submit </button> </div> <div class="col-sm-3"></div> </div> </form> </div> <!-- .container --> 

Answer 1

After cloning date picker to DOM you must have to do following things to bind date-picker to the newly created elements i recommend to apply same class to all datepicker inputs and than do same as follow to bind datepicker.

You can also read this documentation for more information

$('.datepicker').datepicker('update');

Answer 2

 $("#docsUpload").change(function() { debugger; $("#multiShow").empty(); // removes child elements var ele = document.getElementById($(this).attr('id')); var result = ele.files; var ff = result[0]; $("#ff").html("<strong> File Name : </strong>"+ ff.name); for(var x = 0;x< result.length-1;x++){ var fle = result[x+1]; $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>"); $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name); $('#multiShow').append("</div><div class='col-sm-3'></div></div>"); $("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow'); } $('.dpstatic').datetimepicker({ format : "DD/MM/YYYY" }); $('.dpmonthly').datetimepicker({ format : "MM/YYYY" }); $('.dpquaterly').datetimepicker({ format : 'YYYY' }); $('.dpsemester').datetimepicker({ format : 'YYYY' }); $('.dpyearly').datetimepicker({ format : 'YYYY' }); $('.dpother').datetimepicker({ format : "DD/MM/YYYY" }); $('.dpother').datetimepicker({ format : "DD/MM/YYYY" }); }); /* depending on selection box type of date changes */ $(document).ready(function(){ $(".static").show(); // always display on page load $("body").on('change','.period',function(changeEvent){ //selection box value changed // var realId = $(".period").closest("div[id]").attr("id"); //get id var realId = $(changeEvent.target).closest("div[id]").attr("id"); $('#'+realId+' .dateSelector').hide(); //alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll' var operation = '.'+this.value; $('#'+realId+' '+operation).show(); }); // on period change }); // document ready state $(document).ready(function(){ $('.dpstatic').datetimepicker({ format : "DD/MM/YYYY" }); $('.dpmonthly').datetimepicker({ format : "MM/YYYY" }); $('.dpquaterly').datetimepicker({ format : 'YYYY' }); $('.dpsemester').datetimepicker({ format : 'YYYY' }); $('.dpyearly').datetimepicker({ format : 'YYYY' }); $('.dpother').datetimepicker({ format : "DD/MM/YYYY" }); $('.dpother').datetimepicker({ format : "DD/MM/YYYY" }); }); 

  .dateSelector{ display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script> <div class="container-fluid"> <form name="dataSubmit" action="<?php echo base_url('client/store'); ?>" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()"> <hr/> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="form-group has-feedback"> <label for="upload">Upload Files : </label> <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" /> </div> </div> <div class="col-sm-3"></div> </div><!-- .row --> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="form-group has-feedback"> <span id="ff"></span> </div> </div> <div class="col-sm-3"></div> </div><!-- .row --> <div id="selectAll"> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="form-group has-feedback"> <input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" /> </div> </div> <div class="col-sm-3"></div> </div><!-- .row --> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="form-group"> <label for="upload"> Select Type & Date of document below: </label> </div> </div> <div class="col-sm-3"></div> </div> <!-- .row --> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-2"> <div class="form-group"> <select name="period" class="period"> <option value="static" selected="selected">Static</option> <option value="monthly">Monthly</option> <option value="quaterly">Quaterly</option> <option value="semester">Semester</option> <option value="yearly">Yearly</option> <option value="other">Other</option> </select> </div> </div> <!-- begin : datepicker --> <div class="col-sm-4 dateSelector static"> <div class="input-group date datetimepicker dpstatic"> <input type="text" name="staticDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> <div class="col-sm-4 dateSelector monthly"> <div class="input-group date datetimepicker dpmonthly"> <input type="text" name="monthlyDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> <div class="dateSelector quaterly"> <div class="col-sm-2"> <select name="periodQuater[]"> <option value="first">January - March</option> <option value="second">April - June</option> <option value="third">July - September</option> <option value="fourth">October - December</option> </select><br/><br/> </div> <div class="col-sm-2"> <div class="input-group date datetimepicker dpquaterly"> <input type="text" name="quaterlyDate" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> </div> <div class="dateSelector semester"> <div class="col-sm-2"> <select name="periodSemester[]"> <option value="semfirst">April - September </option> <option value="semsecond">October - March</option> </select><br/><br/> </div> <div class="col-sm-2"> <div class="input-group date datetimepicker dpsemester"> <input type="text" name="semesterDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> </div> <div class="dateSelector yearly"> <div class="col-sm-2"> <div class="input-group date datetimepicker dpyearly"> <input type="text" name="yearDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> </div> <div class="dateSelector other"> <div class="col-sm-2"> <div class="input-group date datetimepicker dpother"> <input type="text" name="otherDateF[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> <br/></div> <div class="col-sm-2"> <div class="input-group date datetimepicker dpother"> <input type="text" name="otherDateS[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div></div> </div> <div class="col-sm-3"></div> </div> <!-- .row for selector--> </div> <!-- #selectAll --> <div id="multiShow"> </div> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6 form-group"> <br/> <button type="submit" class="btn btn-primary form-control"> Submit </button> </div> <div class="col-sm-3"></div> </div> </form> </div> <!-- .container --> 

Run the snippet to check what changes i have made compare to original code.

Changes I have made:

(1) As point out by Curiousdev

• remove true from clone()
• in period repeat all the date formats

(2) This is very important,

• Add unique class element to each calendar types. Checkout JSFiddle and search for dpstatic , dpmonthly, dpquaterly, dpsemester, dpyearly, dpother. Without adding this elements calendar will not show respective date formats and some time even calendar wont appear.

For fiddle : https://jsfiddle.net/rv285q8x/

Thank you @Curiousdev and @Ataur Rahman Munna for valuable information and help.

Answer 3

you should simply copy and paste my code.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

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

<input id="datetimepicker" type="text">