Dynamic JQuery date picker code
Solution 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
Solution 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.
Solution 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();
Solution 4
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.
Solution 5
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
});
Admin
Updated on June 27, 2022Comments
-
Admin over 1 year
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?
-
Admin over 13 yearsHi Luca, thanks for ur reply. My code is, $('td:eq(2)', newRow).html('<input type="text" name="days" id="days" class="date" style="width:120px" />'); $('.date').datePicker(); But it doesnot show anything plz help me what I need to do. Give me your valuable help plz.
-
Admin over 13 yearsHi , thanks for ur valuable help.but Here in this link there is no any dynamic content creation .give some example in that plz.
-
Luca Rocchi over 13 yearsare you using jquery ui , is it right ? if so first correct datePicker to datepicker ... i wrote datePicker before as i was writing on the fly... beside that your code looks right ...also be sure it get called (adding an alert()?)
-
Ajax over 11 years
removeClass('hasDatepicker')
was the key! :) THANKS -
Paul Tomblin almost 11 yearsDoesn't work right for me - I don't see the date picker until after I've clicked in the field, so I have to click twice to get the datepicker popup.
-
workdreamer over 10 yearsYou could try to first on document.ready $('.date-pick').datepicker();
-
Paul Tomblin over 10 yearsyou realize this question was about fields dynamically added to the DOM, after an AJAX call or the like, right? How is a document.ready going to help that?
-
workdreamer over 10 yearsactually the problem his when you load by ajax the page could make some time to be triggered and no bind his made to your input. i made an example with ajax and without. You need to understand at the example i can't use an ajax because the cross-domain problem. Here his my example: jsfiddle.net/workdreamer/Cwk9a/3
-
Ganesh RJ over 10 years@workdreamer Thanks for help!! really nice trick when u assign the datepicker while creating inputs itself!
-
Cooper.Wu almost 10 yearshave to added
removeAttr('id')
as well! -
Umair Ayub over 8 yearsthis worked for me
.removeClass('hasDatepicker').removeAttr("id")