Why won't jQuery UI Datepicker work after using jQuery to change the value of the input box?

Question

I have a function that imports information into a form. I am using jQuery to place a date into an input box. The ID of the input box is "depart_date" and I am trying to insert the value of (let's say) 04/01/2012.

$('input#depart_date').replaceWith('<input class="input_med hasDatepicker" type="text" id="depart_date" name="depart_date" value="04/01/2012">');

This works just fine. However, I lose my datepicker. I have even tried to "reinitialize" it by using

$( "#depart_date" ).datepicker({ minDate: 0});

I just don't understand how to get my datepicker back.

Answer 1

You're not just changing the value, you're replacing the object entirely (and removing all the UI hooks [click, focus, blur events] along with it).

Try using just $('#depart_date').val('04/01/2012'); to assign the value. Or, better yet $('#datepart').datepicker('setDate', '04/01/2012');

Answer 2

Why replace the input ? Why not simply change the value?

$('input#depart_date').val("04/01/2012");