CODEWITHSUNDEEP
datepickerdynamic
Shanmugam
Shanmugam

Reputation: 51

Dynamic JQuery date picker code

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?

Upvotes: 5

Views: 14811

Answers (7)

Vijay
Vijay

Reputation: 93

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();

Upvotes: 2

Barbarossa
Barbarossa

Reputation: 808

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

Upvotes: 0

Joe Harvey
Joe Harvey

Reputation: 193

I had a similar problem in that when dynamically adding new rows to my table the Date Picker fields in the new rows (any row added to the DOM dynamically) were all updating my initial rows Date Picker fields.

Removing the hasDatepicker class as suggested above was not enough to solve my issue, probably as I was using .clone() to create my dynamically added rows.

The solution when cloning rows was to remove the cloned input fields, re-create them, add them to my newly cloned table row and THEN re-initiate the Date Picker

For example:

//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
});

Upvotes: 1

workdreamer
workdreamer

Reputation: 2856

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.

Upvotes: 3

Tina Agrawal
Tina Agrawal

Reputation: 616

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

Upvotes: 16

Luca Rocchi
Luca Rocchi

Reputation: 6484

Tirst add a class attribute as "date" to your input or div.

After dynamically add a text input to have to recall $('.date').datePicker() again to bind datePicker to new inputs or div.

Upvotes: 1

Michael D. Irizarry
Michael D. Irizarry

Reputation: 6302

Use JQuery Live to access the dynamically created DOM.

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

The you can attached the picker.

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

Upvotes: 0

Related Questions