WeAreRight
Reputation: 905
bootstrap datepicker not working if it is cloned
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(" <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 -->Upvotes: 1
Views: 2046
Answers (3)
WeAreRight
Reputation: 905
$("#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
- 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.
Upvotes: 1
Manish Singh
Reputation: 1004
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">
Upvotes: 0
Curiousdev
Reputation: 5778
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');
Upvotes: 1
Related Questions
- BootStrap DatePicker NoConflict
- Bootstrap datepicker clone not working
- bootstrap-datepicker don't work
- The Conflict of BootStrap and jQuery-UI DatePicker
- Bootstrap datepicker not working at all
- Bootstrap date picker not working
- Bootstrap : Datepicker is not working
- Unable to use bootstrap-datepicker on cloned rows. Value always stay on first date field
- Bootstrap datepicker is not showing calender after cloning in jquery
- Twitter bootstrap datepicker clone