CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepickerjquery-ui-datepicker
Victor
Victor

Reputation: 13378

Show full date in input for jQuery UI Datepicker

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?

Upvotes: 2

Views: 953

Answers (1)

adeneo
adeneo

Reputation: 318182

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.

Upvotes: 4

Related Questions