Reloading Datepicker with selected date

Reloading Datepicker with selected date

I have a form that error checks, as you should. If the user submits the form, but made a mistake or missed something, the date they chose is lost. How can I load the selected date into datepicker?

I have the following:

  1.     <script>
  2.         <!--
  3.         $(function() {
  4.             $( "#datepicker" ).datepicker({
  5.                 dateFormat: 'yy-mm-dd',
  6.                 maxDate: "+0M +0W +0D",
  7.                 altField: "#alternate",
  8.                 altFormat: "DD d MM yy"
  9.             });
  10.             $( "#datepicker" ).datepicker( "defaultDate", "2013-06-07");
  11.         });
  12.         //-->
  13.         </script>
  14.         <? echo '<p>'.$SUDate.'</p>'; ?>
  15.         <input type="text" id="datepicker" class="text-short leftb" name="SUDate" /><input type="text" id="alternate" class="text-short" readonly />

The above works to set the date as a test, showing the readable date next to it. BUT it does not pass that date if the form is submitted. The user has to physically click on the date in order to select it. Below shows a user has clicked on the date and how it populates the two fields.


What I want is:

  1. The user completes the form
  2. A mistake is made, so all fields they submitted are pre-polluted, including the datepicker
  3. Without having to click on the date picker I need the $SUDate populated (in red) and the alternative field (in grey) too.

Any ideas people?

Cheers G