0
通过使用jquery clone（）我重复我的文档的div部分。这个div还包含引导日期选择器。但是，克隆div的日期选择器不起作用。我使用这个日期选择器https://eonasdan.github.io/bootstrap-datetimepicker/bootstrap datepicker不能正常工作，如果它被克隆
注：在代码段中选择文件选项添加多个文件，那么只有你会看到额外的日期选择器的。
/* 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" /> \t <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" /> \t <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" /> \t <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" /> \t <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" /> \t <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" /> \t <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" /> \t <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 -->
你在哪里包括'bootstrap-datetimepicker.min.js'和'bootstrap-datetimepicker.min.css'作为你的github链接说的包含。 –
@Curiousdev感谢您添加这些文件。 – WeAreRight
@JoneDotosvky你总是欢迎，请找到我对这个问题的答案以及 – Curiousdev