jquery datepicker on dynamic input fields - php

Question

I need help with datepicker on dynamic created input fields...
I have this form:
<table id="reminder">
<tr>
<th>Payment Reminders</th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td><label>Reminder</label></td>
<td><input type="text" name="payreminder[]" id="payreminder" class="input1" size="20" ><script>$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); </script></td>
<td><label>Description</label></td>
<td><input type="text" class="input1" name="paydescription[]" id="paydescription"></td>
<td> Add another</td>
</tr>
<tr>
<td colspan="6"><div id="dynamicInputReminder"></div> </td>
</tr>
</table>
And the javascript for adding more reminders is:
<script type="text/javascript" >
var counterReminder = 1;
var limit = 20;
function addReminder(divName){
if (counterReminder == limit) {
alert("You have reached the limit of adding " + counterReminder+ " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<td><label>Reminder</label></td><td><input type=\"text\" id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"input1\" ></td><td><label>Description</label></td><td><input type=\"text\" id=\"paydescription["+counterReminder+"]\" name=\"paydescription["+counterReminder+"]\" class=\"input1\"></td>";
document.getElementById(divName).appendChild(newdiv);
counterReminder++;
}
}
</script>
The question is: How and where can I call the script bellow for the date picker so that it works for the dynamically created fields ?
<script>$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); </script>
Thanks a lot!

Answer 1

Use a class instead of an id for your input field, for example
<input type=\"text\" id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"payreminder\" >
<script>
$(document).on('focusin', '.payreminder', function(){
$(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
});
</script>

Answer 2

try this
remove your script and put this at the end of the code.
NOTE: id should always be unique so i used class here.
change you ids to class "payreminder".
$(document).find('.payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});

Answer 3

add a class named date on each input field on which you want to add datepicker,
Now each time you add new field, call following function
$(".date").datepicker();

Answer 4

Try this:
<script type="text/javascript" >
var counterReminder = 1;
var limit = 20;
function addReminder(divName) {
if (counterReminder == limit) {
alert("You have reached the limit of adding " + counterReminder+ " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<td><label>Reminder</label></td><td><input type=\"text\" id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"input1\" ></td><td><label>Description</label></td><td><input type=\"text\" id=\"paydescription["+counterReminder+"]\" name=\"paydescription["+counterReminder+"]\" class=\"input1\"></td>";
document.getElementById(divName).appendChild(newdiv);
$(newDiv).find('input').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
counterReminder++;
}
}
</script>

Answer 5

$(document).on('focusin', 'input[id^=payreminder]', function(){
$(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
});

Answer 6

Alternatively, you could use a data- attribute for each input instead of a class. The following initializes any datepicker <input type="text" data-datepicker ...> tags as soon as the page is loaded, and then can be called again after the new reminder is added.
function initDatePicker () {
$("input[data-datepicker]").datepicker();
};
$(document).ready(initDatePicker());
Additionally, I've found it to be useful to call the destroy() method for all the datepicker <input>'s each time you reinitialize them; otherwise, they seem to break. I used something like the following:
function addReminder(divName){
...
$("input[data-datepicker]").datepicker('destroy');
initDatePicker();
...
};
Obviously, make sure you call datepicker('destroy') before you call initDatePicker(), or you'll wipe out all your datepickers every time you add a new reminder.
jQueryUI datepicker destroy method