引導日期選擇器如果被克隆則不起作用

Question

通過使用jQuery clone（），我重復了文檔的div部分。 該div還包含引導日期選擇器。 但是，克隆的div的日期選擇器將不起作用。 我正在使用此日期選擇器https://eonasdan.github.io/bootstrap-datetimepicker/

注意：在代碼段中，在“選擇文件”選項中添加多個文件，然后只有您會看到額外的日期選擇器。

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

在將日期選擇器克隆到DOM您必須執行以下操作將日期選擇器綁定到新創建的元素，我建議將相同的class應用於所有日期選擇器inputs然后執行以下操作來綁定日期選擇器。

您也可以閱讀此文檔以獲取更多信息

$('.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 --> 

運行代碼片段，以檢查我與原始代碼進行了哪些更改。

我所做的更改：

（1）正如Curiousdev所指出的

• 從clone（）中刪除true
• 在期間重復所有日期格式

（2）這很重要，

• 向每種日歷類型添加唯一的類元素。 結帳JSFiddle並搜索dpstatic，dpmonthly，dpquaterly，dpsemester，dpyearly，dpother。 如果不添加此元素，日歷將不會顯示相應的日期格式，並且有時甚至不會出現日歷。

小提琴： https : //jsfiddle.net/rv285q8x/

感謝@Curiousdev和@Ataur Ra​​hman Munna提供的寶貴信息和幫助。

Answer 3

您只需復制並粘貼我的代碼即可。

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