Dynamic date picker code in jQuery

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

It contains a drop down list. Depending on the selected value of the drop-down list, I create a dynamic <TD>one that can have a text field or a drop-down list.

If this is a text field, I must add a date picker for this text field.

I did this, in addition to selecting a date for the dynamically created text field.
If you create 100 lines, the text field names must be the same for all lines.

How to add datepicker for dynamically created text field?

+5
source share
7 answers

. DatePicker . hasDatePicker .

, .

- -

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

,

+16

, @Tina Agrawal. , , . , 1900-01-01.

...

.

i :

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

, .

+3

, -. , , jquery. , , "class_date", datepicker.

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

Tirst "" div.

$('.date').datePicker(), datePicker div.

+1

, Date Picker ( , DOM ) Date Picker.

hasDatepicker, , , , .clone() .

The solution when row cloning was to remove the cloned input fields, recreate them, add them to my newly cloned table row and THEN re-initiate the date picker

For instance:

//Remove exisiting cloned input fields
new_row.find("td.date input").remove();

//Create new input fields and append to table td
var date_tds = new_row.find("td.date");
$('<input />', {"name":"gStartDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[0]);
$('<input />', {"name":"gEndDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[1]);

//Re-initiate datepicker on the input fields                    
new_row.find("td.date input").datepicker({
    dateFormat:"dd-mm-yy",
    minDate:StartDate,
    maxDate:EndDate
});
+1
source

Use jQuery Live to access the dynamically created DOM.

http://api.jquery.com/live/

You can attach the collector.

http://jqueryui.com/demos/datepicker/

0
source

should use ".on" instead of live - see http://api.jquery.com/on/

0
source

All Articles