Geek asks and answers

JQuery input date input format

I am currently working on some widget coding for hotel reservations and am using jQuery UI Date Picker.

The problem is the external booking system, in which the client uses date format processes like yyyy-mm-dd, and the client believes that this confuses people who see 2012-06-19in the input field and would like the date to be shown in the European format dd-mm-yyyyinstead on their website.

Thus, basically the form should show dd-mm-yyyywhen the date is selected, and then when the submit button clicks on the form one way or another, you must rearrange the values ​​before submitting yyyy-mm-dd.

The reservation system company said that they have many customers who have achieved this, but said that they are not 100% sure how to do this.

+5
source share
2 answers

DatePicker can handle this using the altFieldand options altFormat.

altField: input element to be updated with the selected date with datepicker. Use the option altFormatto change the date format in this field. Leave as an empty field without an alternative 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" />
Run codeHide result
+11
source

There are several ways to get closer to this, but most likely I would deal with this at a glance.

  • add a hidden field to store the new date value.

  • create an event handler for the submit function of the submit button.

  • :

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

- , , , . .

+3

More articles:


All Articles