Why does constructing a JQuery UI Datepicker clear the field's value?

Question

I have an INPUT tag with the value attribute set to "15-May-2012" and I have initialized a JQuery UI Datepicker with it as follows:

<input type="text" name="schedule" id="schedule"
      value="15-May-2012">

<script type="text/javascript">
  $(function() {
    $( "#schedule" ).datepicker();
    $( "#schedule" ).datepicker( "option", "dateFormat", "d-M-yy" );
  });
</script>

For some reason, the value of the INPUT tag is being cleared once the Datepicker is initialized. Note that the value in the INPUT field matches the format set for the Datepicker.

Why is the value cleared?

Here is a live example of it: http://agnelkurian.com/lab/datepicker_example.html

Answer 1

When you bind the datepicker:

$('#schedule').datepicker();

it will use the default dateFormat and that is "mm/dd/yy"; your "15-May-2012" doesn't match that format so the datepicker clears it when it fails to parse it using "mm/dd/yy". Then you change the format:

$("#schedule").datepicker("option", "dateFormat", "d-M-yy");

but the value has already been lost.

You should set the format when you bind the datepicker:

$("#schedule").datepicker({
    dateFormat: 'd-M-yy'
});

Demo: http://jsfiddle.net/ambiguous/mHyn7/ ​

Answer 2

Simple solution that actually works:

var tmp = $('#schedule').val();
$("#schedule").datepicker("option", "dateFormat", "d-M-yy");
$("#schedule").val(tmp);

Answer 3

    $( "#schedule" ).datepicker();
$( "#schedule" ).datepicker( "option", "dateFormat", 'd-M-yy' );
$( "#schedule" ).val("15-May-2012");