Dynamic JQuery date picker code

14,707

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
});
Share:
14,707
Admin
Author by

Admin

Updated on June 27, 2022

Comments

  • Admin
    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
    Admin over 13 years
    Hi 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
    Admin over 13 years
    Hi , 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
    Luca Rocchi over 13 years
    are 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
    Ajax over 11 years
    removeClass('hasDatepicker') was the key! :) THANKS
  • Paul Tomblin
    Paul Tomblin almost 11 years
    Doesn'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
    workdreamer over 10 years
    You could try to first on document.ready $('.date-pick').datepicker();
  • Paul Tomblin
    Paul Tomblin over 10 years
    you 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
    workdreamer over 10 years
    actually 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
    Ganesh RJ over 10 years
    @workdreamer Thanks for help!! really nice trick when u assign the datepicker while creating inputs itself!
  • Cooper.Wu
    Cooper.Wu almost 10 years
    have to added removeAttr('id') as well!
  • Umair Ayub
    Umair Ayub over 8 years
    this worked for me .removeClass('hasDatepicker').removeAttr("id")