jQuery Date Picker Input Date Format

datepicker, jquery, jquery-ui

Solution

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

Problem

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.

Original source