在jQuery UI Datepicker的输入中显示完整日期

Question

Using jQuery UI datepicker, I have the following:

<input type="text" id="check_in">

$( "#check_in" ).datepicker({
  numberOfMonths: 2,
  dateFormat: 'dd/mm/yy',
  minDate: -1
});

When a date is chosen, the date is shown in the input field as 31/12/2013 . How can I make it show "31 December 2013" in the input field, but upon submission it is still 31/12/2013 ?

Answer 1

You'll need two inputs:

<input type="text" id="check_in" />
<input type="hidden" id="altfield" name="date" />

and to change the JS to

$("#check_in").datepicker({
    numberOfMonths: 2,
    altField: '#altfield',
    altFormat: 'dd/mm/yy',
    dateFormat: 'dd MM yy',
    minDate: -1
});

FIDDLE

The hidden input will be submitted with the dd/mm/yy value, while the visible input will show the format you're trying to show.