Dynamic JQuery date picker code

Question

I need to create dynamic filter that adds/removes rows dynamically.

It contains a drop-down box. Depending upon the drop-down box value selected, I create a dynamic <TD> that may have a text field or drop-down list.

If it's a text field, then I have to add date picker for that text field.

I have done this, except date picker for dynamically generated text field.
If you're creating 100 rows, the text fields' names should be same for all rows.

How to add datepicker for dynamically generated text field?

Answer 1

I had the same issue. You would need to rebind the DatePicker to the dynamically added row. The date picker associates a hadDatePicker Class to the dynamic row.

So you would need to remove that and rebind.

Something like this -

    jQuery('.date-pick').removeClass('hasDatepicker').datepicker({
    dateFormat: 'mm-dd-yy'
    });

Regards, Tina Agrawal

Answer 2

Actually i did use the solution provided by @Tina Agrawal But since now, when i select a date from the calendar, i click again and re-select. If i click on next month, it will go to 1900-01-01.

Well it was so strange...

After two hours of trial and errors and research.

i simply did:

$('.date-pick').live('click', function(){
 $('.date-pick').datepicker();
});

Well it works.

Answer 3

I had the same issue and solved it in a different way. Although I am not very sure why is it working as I am very new to jquery. I wrote the following and it iterates the entire set of controls having the class "class_date" and rebinds the datepicker control to it.

$(".class_date").removeClass('hasDatepicker').datepicker();