Struggling to get datepicker for dynamically created textboxes

Question

I have generated textbox dynamically and trying to get date picker for each textboxes separately.

The problem is if i select a text box and pick date it will apply for all textboxes. I don't know how to pass the value to get the result. Please forgive If my English (or) the way I expressed is wrong. I will be thankful for your help.

My Script to call calendar:

<script type="text/javascript">
$(window).load( function() {

    $('#mycalendar3').monthly({
        mode: 'picker1',
        target: '#mytarget1',
        setWidth: '370px',
        startHidden: true,
        showTrigger: '#mytarget1',
        stylePast: true,
        disablePast: true,
                    xmlUrl: 'events.xml'
    });


                $('#mycalendar2').monthly({
        mode: 'picker1',
        target: '.value1',
        setWidth: '370px',
        startHidden: true,
        showTrigger: '.value1',
        stylePast: true,
        disablePast: true,
                    xmlUrl: 'events.xml'
    });



switch(window.location.protocol) {
case 'http:':
case 'https:':
// running on a server, should be good.
break;
case 'file:':
alert('Just a heads-up, events will not work when run locally.');
}

});

HTML code:

 <div style="display:inline-block; width:150px;">
                  <input type="text"  class="value1" id="mytarget" >
        <div class="monthly" id="mycalendar2"></div>
    </div>


              <div style="display:inline-block; width:150px;">
        <input type="text" id="mytarget1">
        <div class="monthly" id="mycalendar3"></div>
    </div>

don't see any issue with above code. Is there any other code which is missing in this post? How the textboxes are getting generated dynamically? can you please show that code? — vijayP, Sep 20 '16 at 07:30
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Sep 20 '16 at 07:50
Please refer this link Vijay. I have pasted my entire code there. — Soundar Subramani, Sep 20 '16 at 07:51
If you're using `$(window).load(` to set the events, but the textboxes are generated "dynamically" - there's a good chance that they're generated *after* you've attempted to **convert** them (code not in the question). Add `alert($('#mycalendar3').length)` just before the `.monthly` call to see if they exist yet. — freedomn-m, Sep 20 '16 at 07:52
I have refered that post Sir. It is not working in my scenerio. @freedomn-m — Soundar Subramani, Sep 20 '16 at 07:53
The alert shows 1 Sir. What can i do to change the function to work for dynamic elements sir? — Soundar Subramani, Sep 20 '16 at 07:56
I have used $(window).load() like u said but i tried to change that and still the function is not working properly sir @freedomn-m — Soundar Subramani, Sep 20 '16 at 12:32

score 0 · Answer 1 · edited Sep 23 '16 at 15:13

You need to use jquery on event, I have created demo fiddle here,

$(function() {
  $("#datepicker").datepicker();
  $("button").on('click', function() {
    $('.output').append('<input type="text" name="gentext" id="gent" />');
    $("#gent").datepicker();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Normal input datepicker</h3>
<p>Date:
  <input type="text" id="datepicker">
</p>
<button>generate</button>
<h3>Generated input datepicker</h3>
<div class="output"></div>

Please apply the same event on your code, it will work on generated inputs.

Struggling to get datepicker for dynamically created textboxes

1 Answers1