Jquery Date Picker And Time Picker Do Not Work When Fields Are Dynamically Created

I'm using below jQuery code to generate dynamic input fields (multiple) and it includes time pickers and date pickers, but they don't work. $('#add_another_event').click(function()

Solution 1:

You need to re-initialize the date/time pickers on your new elements and clear the classes that were added by the UI widget:

$('.datepicker', newElem).removeClass('hasDatepicker').datepicker()

In this case, providing your new collection as the context so that you don't search the entire document.

---

This is showing one of the pitfalls with cloning vs templating. If you used a template to generate your new forms, you wouldn't risk copying data and classes which may affect the way the way widgets are constructed in the new form. In your case, you need to remove the hasDatepicker class which is applied by the UI and prevents new datepickers from being initialized on the input. However, you also can't use the cleanup method datepicker('destroy') because there isn't actually a datepicker on the new nodes. So you end up having to do cleanup manually.

Solution 2:

You must invoke

$('target_selector').datepicker();

for each dynamically added element.