[英]bootstrap datepicker not working if it is cloned
By using jquery clone() i am repeating div section of my document. 通过使用jQuery clone(),我重复了文档的div部分。 This div also contains bootstrap datepicker.
该div还包含引导日期选择器。 But, cloned div's datepicker won't work.
但是,克隆的div的日期选择器将不起作用。 I am using this datepicker https://eonasdan.github.io/bootstrap-datetimepicker/
我正在使用此日期选择器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(" <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 -->
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. 在将日期选择器克隆到
DOM
您必须执行以下操作将日期选择器绑定到新创建的元素,我建议将相同的class
应用于所有日期选择器inputs
然后执行以下操作来绑定日期选择器。
You can also read this documentation for more information 您也可以阅读此文档以获取更多信息
$('.datepicker').datepicker('update');
$("#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(" <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 (1)正如Curiousdev所指出的
(2) This is very important, (2)这很重要,
For fiddle : https://jsfiddle.net/rv285q8x/ 小提琴: https : //jsfiddle.net/rv285q8x/
Thank you @Curiousdev and @Ataur Rahman Munna for valuable information and help. 感谢@Curiousdev和@Ataur Rahman Munna提供的宝贵信息和帮助。
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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.