Question

In my project, I have a textbox for meetingdate, i have given id = meetingdate1 to this textbox. if one want to add more meetings date then there is button for that. After clicking this button, new textbox added below to previous textbox, say meetingdate2, meetingdate3 and so on… Now I want to add datepicker textbox instead of textbox, so I have used jquery for this purpose. Its work for 1st textbox whose id = meetingdate1 but datepicker functionality not getting in other textboxes whose id = meetingdate2, id= meetingdate3 and so on…

the jquery code is:

        $("#addButton").live("click", function () {

        if(counter_ldates>10){
            alert("Only 10 dates allowed");
            return false;
        }   

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'LdateDiv' + counter_ldates);
            newTextBoxDiv.html('<label>Date #'+ counter_ldates + ' : </label>' +
            '<input type="text" name="meetingdate' + counter_ldates + 
            '" id="meetingdate' + counter_ldates +
            '" class="ldatestextbox" value="" style="width: 75px" >');

        newTextBoxDiv.appendTo("#LdatesGroup");

        counter_ldates++;
        $('#ldates_cnt').attr('value', counter_ldates);
    });
    $( "#meetingdate1" ).datepicker();
$( "#meetingdate2" ).datepicker();
$( "#meetingdate3" ).datepicker();
$( "#meetingdate4" ).datepicker();
$( "#meetingdate5" ).datepicker();

how can i solve this issue of datepicker?

Answer 1

Try initializing the datepicker after appending the new input:

newTextBoxDiv.appendTo("#LdatesGroup").find("input").datepicker();

What you’re doing is, trying to initialize the datepicker on elements don’t exist (yet).