jquery-ui datepicker not appearing on dynamic input

Question

I inherited a bunch of code of varying quality and I'm fixing a bunch of things that has been wrong. One thing that it does is that is has a table of form inputs, one of which uses jquery-ui Datepicker. There is also a button that creates a new row at the bottom of the table. The new row's Datepicker never shows up.

I've seen this problem listed a few times here on SO but none of those solutions worked. I'm putting up what I have now. My jfiddle is at:

http://jsfiddle.net/squarepegsys/G8WEC/2/

The meat of my code is here:

tr.find(".datepicker").on("focusin",function() {
    console.log("got focus");
    $(this).datepicker();

});

In the on("focusin"...) line, I see "got focus" on the console but never see the datepicker show up.

When you clone the element you're also cloning the ID and IDs must be unique. — j08691
– j08691, Commented Jul 16, 2014 at 19:09

j08691 · Accepted Answer · 2014-07-16 19:21:12Z

7

When you create the datepicker instance, jQuery assigns it an ID, and when you clone it, you're duplicating it. Instead, create the datepicker instance dynamically via:

$(document).on('focus', ".datepicker", function () {
    $(this).datepicker( "destroy" ).datepicker();
})

jsFiddle example

This will work for dynamically created elements and jQuery will manage the IDs properly.

answered Jul 16, 2014 at 19:21

j08691

208k33 gold badges269 silver badges281 bronze badges

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

2 Comments

MikeHoss Over a year ago

That may be the fastest SO answer ever. I used a variation of datepicker("destroy").datepicker() and it worked wonderfully. I'm counting this -- and thanks!

Sergey Boiko Over a year ago

@j08691, I fixed your example, it does not work when you first click textbox and after "add row", please, take a look at jsFiddle example

Collectives™ on Stack Overflow

jquery-ui datepicker not appearing on dynamic input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related