jQuery Date Picker Input Date Format

Question

I'm currently working on some coding for a hotel booking widget and am using the jQuery UI Date Picker.

The problem is the external booking system the client is using processes the date format as yyyy-mm-dd and the client thinks this is confusing people seeing 2012-06-19 in the input box and would like the date shown as in the European format dd-mm-yyyy instead on their site.

So basically the form needs to show dd-mm-yyyy when the date is picked and then when the submit button is click on the form somehow the date needs to rearrange to yyyy-mm-dd before sending the value.

The booking system company say they have many clients that have achieved this but have said they are not 100% sure how this is done.

Answer 1

DatePicker can handle this using the options altField and altFormat.

altField : An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field.

$('#thedate').datepicker({
  dateFormat: 'dd-mm-yy',
  altField: '#thealtdate',
  altFormat: 'yy-mm-dd'
});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Shown Field: <input id="thedate" type="text" /><br />
Hidden Field : <input id="thealtdate" type="text" />