jQuery UI DatePicker question

Question

Hi,

I have 2 input fields and i am using it with a DatePicker like this

$("#depart, #return").datepicker({
     showOn: 'both',
     buttonImage: 'images/icon_calendar.gif',
     buttonImageOnly: true,
     numberOfMonths:2,
     dateFormat: 'dd-mm-yy'
});

At some point i want to remove the return field and i am doing it with the .remove() method. Then using the .after method i'm adding again this field to the form. But the datepicker functionality is not available.

It makes sense, but i don't know how to re-assign a date picker to the newly created field?

Answer 1

I believe you have to reassign in right after you re-add it.

Something like this:

$("#return").remove();

$("something").after(myReturnfield);

$("#return").datepicker(myDatepickerSettings);

Answer 2

After adding the field again, you need to call .datepicker on the field

Working Demo to demonstrate

Note about demo: since the add buttons will add a text input with id="return", adding more than one will mess up the input to which the datepicker is attached.

$("[where you're inserting]").after("<input id='return' type='text' />");

$('#return').datepicker({
     showOn: 'both',
     buttonImage: 'images/icon_calendar.gif',
     buttonImageOnly: true,
     numberOfMonths:2,
     dateFormat: 'dd-mm-yy'
    });

I would recommend just hiding the input then showing it again when you need to, rather than removing then re-inserting into the DOM.