jquery datepicker on dynamic input fields

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> <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!

Alfred Bez · Accepted Answer · 2013-11-26 09:43:39Z

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>

edited Nov 26, 2013 at 9:43

answered Mar 1, 2013 at 10:25

Alfred Bez

1,2811 gold badge15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bipen · Accepted Answer · 2013-03-01 10:24:19Z

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

answered Mar 1, 2013 at 10:24

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Manish Goyal · Accepted Answer · 2013-03-01 10:27:58Z

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

answered Mar 1, 2013 at 10:27

Manish Goyal

7002 gold badges7 silver badges18 bronze badges

Comments

Andras Toth · Accepted Answer · 2013-03-01 10:31:44Z

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>

edited Mar 1, 2013 at 10:31

answered Mar 1, 2013 at 10:19

Andras Toth

6286 silver badges14 bronze badges

3 Comments

Andras Toth Over a year ago

Did you try exactly what I wrote? Because I made some changes to your last code snippet.

Lilou Over a year ago

Yes I have made copy-paste on the whole script

Lilou Over a year ago

Sorry this still doesn't work. However thank you for traying to help. I have already accepted the answer of @Alfred Bez

RRikesh · Accepted Answer · 2013-03-01 10:37:33Z

0

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

edited Mar 1, 2013 at 10:37

answered Mar 1, 2013 at 10:19

RRikesh

14.5k5 gold badges55 silver badges74 bronze badges

1 Comment

Andras Toth Over a year ago

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]'

claypooj · Accepted Answer · 2020-07-17 05:24:05Z

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

Collectives™ on Stack Overflow

jquery datepicker on dynamic input fields

6 Answers 6

Comments

Comments

Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related