jQuery Datepicker Binding to Dynamic Input – A Simple Solution

jquery datepicker bind to dynamic element

jQuery datepicker plugin is one of the most popular and heavily used plugins in any simple to complex web projects. It gives the user ability to select date and time from the calendar UI it renders.

But we often face problem with binding the jquery date picker event to the HTML elements which have been dynamically added to the page.

Problem

Here is an example to show you the scenario. In below screenshot you can see we sometimes need to generate a field or even a form to the page dynamically.

jquery datepicker dynamic binding

In the above form, we have few fields like DOB and other which will have date picker control but the second box is generated with the Add More button, hence that block was not part of the page itself. And datepicker won’t work for the second fields.

Let’s have a look on typical datepicker initialize code.

The above piece of code won’t work for those dynamically generated input fields. Previously we had few options like .delegate() and .live() but those are deprecated as of jQuery v 1.7

Solution

But in jQuery 1.7, .on() method has been introduced which provides all functionality required for attaching event handlers. Below is the solution in the situation when we have binding the events problem to the newly initialized elements.

The above simple code will bind the datepicker control to all the available and upcoming elements on the page. You can use same on() function not only for the datepicker but where ever you need to bind any method to the dynamic elements.