Use JQuery Datepicker on dynamically created fields
12,908
you have id="datepicker"
for all your datepicker inputs, but ids are supposed to be unique in a given DOM. use class="datepicker"
instead. and also, since you're using jquery anyways, you dont need to use vanilla javascript onclick
function.
demo: http://jsfiddle.net/swm53ran/331/
<div class="mytemplate" style="display: none;">
<input class="datepicker" type="text" name="name[]"/>
</div>
<div class="dates">
<div>
<input class="datepicker" type="text" name="name[]"/>
</div>
</div>
<input type="button" class="addmore" value="Add more">
$(document).ready(function() {
$('.addmore').on('click', function() {
$(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates");
});
$(document).on("focus", ".datepicker", function(){
$(this).datepicker();
});
});
Author by
Zohaib Hassan
Updated on June 17, 2022Comments
-
Zohaib Hassan almost 2 years
I have to use datepicker in wordpress site, in which a plugin creates fields dynamically with same name(array), same #id and same .class i try to use it using focus but i got error on it
TypeError: inst is undefined
Please hel
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assests/jquery-ui.min.css" rel="stylesheet"> <script src="assests/jquery.js"></script> <script src="assests/jquery-ui.js"></script> </head> <body> <div class="mytemplate" style="display: none;"> <input id="datepicker" type="text" name="name[]"> </div> <div class="dates"> <div> <input id="datepicker" type="text" name="name[]"> </div> </div> <input type="button" value="Add more" onclick="myfunction()"> <script> function myfunction() { $(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates"); } </script> <script> $(document).on("focus", "#datepicker", function(){ $(this).datepicker(); }); </script> </body> </html>