2

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> <a href="#" onClick="addReminder('dynamicInputReminder');" title="Add another">Add another</a></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!

6 Answers 6

8

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>
0
1

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'});
0

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();
0

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>
3
  • Did you try exactly what I wrote? Because I made some changes to your last code snippet. Mar 1, 2013 at 10:26
  • Yes I have made copy-paste on the whole script
    – Lilou
    Mar 1, 2013 at 10:28
  • Sorry this still doesn't work. However thank you for traying to help. I have already accepted the answer of @Alfred Bez
    – Lilou
    Mar 1, 2013 at 10:46
0
$(document).on('focusin', 'input[id^=payreminder]', function(){
  $(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
});
1
  • 1
    That id selector wont work. He adds a counter at the end, because there will be more than one picker. Try this instead: 'input[id^=payreminder]' Mar 1, 2013 at 10:23
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.