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.

Goran Mottram · Accepted Answer · 2015-11-03 00:08:52Z

11

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

edited Nov 3, 2015 at 0:08

answered Jun 19, 2012 at 17:09

Goran Mottram

6,30428 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shawn Campbell · Accepted Answer · 2012-06-19 16:19:32Z

3

There are a bunch of ways to approach this but this is likely how I would handle it at first glance.

add a hidden field to store the new date value.
create an event handler for the on submit function of the submit button.
In that function create the new date formatted correctly:

var d = new Date($("oldDateFormatPicker").val()); $("hiddenField").val(d); return true;

Something like that at least the syntax may be a bit off but it's close. In our server side code just point to the hidden field instead of the date picker.

answered Jun 19, 2012 at 16:19

Shawn Campbell

1931 silver badge8 bronze badges

Collectives™ on Stack Overflow

jQuery Date Picker Input Date Format

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related