Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 607
Agnel Kurian Avatar asked Dec 12 '22 02:12

Agnel Kurian


1 Answers

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/ ​

like image 145
mu is too short Avatar answered Dec 14 '22 14:12

mu is too short