JQuery datePicker not working for dynamically created input element

Question

I am trying to integrate the jquery datepicker to an input field which i am creating dynamically using script..

my script is like...

function getDate(id)
{
       $('.pop-up-link').show();
        $.ajax({
        url :   'gettartDate.jav',
        data    :   'Id='+id,
        success :   function(dateStr)
                        {
                             var htmlStr = 'Start Date : <input type="text" class="datepicker" id="startDateId" value="'+dateStr.StartDate+'"/>';
                             $(".pop-info").html(htmlString);
                             $('.datepicker').datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true});
                        }
}

I am calling this script when i need to edit the date in database and to add new entry to database. When i need to add new entry, im setting id as 0 and returning a blank string..

Now my problem. the datepicker works perfectly for edit functionality.. But when i add a new entry, the datepicker ui comes.. But the date is not updating to that input field. Again, when i put an alert to display selected date,i noticed that only date is changing.. The year and month is not changing, even when i change it

Qpirate · Accepted Answer · 2012-11-01 10:18:16Z

1

It could be down to the fact you are dynamically adding the datepicker with the same ID's, i was having the same issue with dynamically created datepickers. if there was anyway you could take out the Id attr and use the Name attr it should work.

so you should have the following

var htmlStr = 'Start Date : <input type="text" class="datepicker" name="startDateId" value="'+dateStr.StartDate+'"/>';

answered Nov 1, 2012 at 10:18

Qpirate

2,0881 gold badge31 silver badges42 bronze badges

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

3 Comments

Dil Se... Over a year ago

Again i got another pblm.. That value is not getting when i used $('[name="startDateId"]').val();

Qpirate Over a year ago

Well if you have a few different datepickers on the page then your code $('[name="startDateId"]').val(); will only get the first value. you need to add some context to where you are getting the date from by doing something like $('[name="startDateId"]',$(".pop-info")).val(); but with out the full markup i am just making a guess.

Dil Se... Over a year ago

no actually it was my mistake.. I had forgot to put a comment

svenbravo7 · Accepted Answer · 2012-11-01 10:12:24Z

1

Try using the refresh method on .datepicker like so:

$( ".datepicker" ).datepicker( "refresh" );

answered Nov 1, 2012 at 10:12

svenbravo7

3171 silver badge6 bronze badges

Collectives™ on Stack Overflow

JQuery datePicker not working for dynamically created input element

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related