JQuery DatePicker

Question

Hi I am creating one web application. here I am facing one issue with jquery . Actually in my concept when user clicks on the Plus button one new row will be added. When user clicks on the minus button that specific row will be deleted. Row is having drop down lists and text boxes in it. Depending upon user selection the will be created. It may be text box or drop down list box. If it is a textbox I need to create a datepicker. When user click on that textbox That text box should be created dynamically.so any one can help now i am in the verge.

Answer 1

I don't think I understand exactly what you are having trouble with, but I hope this will help nudge you in the right direction:

The jQuery UI DatePicker

Answer 2

After you add the row, you need to attach the datepicker to your textbox. Something like this should be run after the element is created:

$('.date_input').datepicker({
            changeMonth: true,
            changeYear: true
        });

Answer 3

It depends on the version of jquery you are using:

The key detail is how you tell jquery to attach to an item which does not exist yet.

In 1.3 and up, you use a .live on the datepicker div name, so that it knows to create the datepicker.

If using an older version (1.2 and lower), you create a jquery object that is your text, and then attach the listener to the jquery object. Killerphps ajax with jquery video "Dom Manipulation" has a great walkthrough about how to do it.

Answer 4

suppose your textbox element is like this:

<input type="text" ..... />

then add a css-class (if it does not contains one already and this should not be used with other kind of elements only with textboxes for datepicker) like this:

<input type="text" class="dtp" .... />

In you jquery code that adds new row:

var lastRow=$("table tr:last");//get newly added row some way.

$(lastRow).find("td input:text").datepicker();

Answer 5

I ran into a similar problem and managed to come up with a workaround.

I noticed that when I did the clone() on my tr the original DatePicker input (input.date) was cloned, complete with the "hasDatePicker" class. Removing this class and re-running .datepicker() on the tr solved it.

Sample code is:

tr.find('input.date').removeClass('hasDatepicker').datepicker();