Last week, I got a chance to solve one of the prolonging issue in our startup project. In this post, i would like to share my experience about how i handled that issue.

One of our requirement in our project is to dynamically create a set of date fields. 

As soon as i heard about the date field, my mind goes towards the jQuery datepicker and i thought it will be very easy to implement that. One more reason is that we have already used in many places in our application.

I just followed the previous steps of implementation and here comes the issue. We need to assign a unique id to each date field and we have to initialize the element with .datepicker() method as soon as the DOM elements are ready.

For my case, the unique id will be generated dynamically and it will not be available while the DOM is loaded. I tried to find the solution by search through google but i didn’t find any. Hence i applied a workaround solution for that and i started focusing on some other area.

Last week i got some time and i just plan to revisit that issue. Again i searched and to my surprise, through  stackoverflow,  i found the solution, putting datepicker on dynamically created elements

From the above link, i learnt how to dynamically append jQuery objects to any elements. I have followed as like below. 

Now, the datepicker works as per our requirement. Also, i noticed that live method should be used instead of on method prior to jQuery 1.7.

The above step can be applied to any type of elements that require dynamic appending of jQuery methods.

I haven’t applied this solution other than datepicker. If anyone apply that in any other way, do please post your comments.

Also, i am going to work on one more interesting issue which is related to datepicker and jQuery. Hope, i will find the solution soon and will be posting that as a followup of this post. Till then, bye to all.