jQuery + form + textinput > Is it possible to display one value in a textinput and submit another?

Question

I'm working on an application where dates are passed as yyyy-mm-dd but displayed to the client as mm-dd-yyyy (US based client).

I'm using a jQuery datepicker for selecting from/to dates in a report and would like to show the dates to the client as mm-dd-yyyy but when the form is submitted, submit as yyyy-mm-dd.

Is it possible to display one value in a textinput textbox and have another submitted without needing to hook into onSubmit?

I've come up with the following alternatives:

1. Hide the text input for the from and to fields, create dummy fields and make use of the following jQuery date picker functions: altField and altFormat to display the value to the client in their preferred way and deal only with the submitted values which are set through the alt functions.

2. Have an onSubmit javascript call to change the dates from mm-dd-yyyy to dd-mm-yyyy and also change the value=" to change the date to the client's preferred format.

3. Rewrite the app to handle all dates in mm-dd-yyyy and hope the client never has non-US customers that would like their dates in a specific format.

4. Change all dates to dd-Mon-YYYY e.g. 26-May-2010 as all of our client's customers are guaranteed to be English only.

Answer 1

The way I do this is to translate before display and after submit in my PHP code. I am getting dates from a MySQL database which are in the 'YYYY-MM-DD' format, but displaying them in the form with a jQuery UI datepicker in the 'MM/DD/YYYY' format.

Answer 2

Edit: thought you were wanting to use an additional field, how's this for using the same one?

http://jsfiddle.net/bEd8c/

format the date you want visible with dateFormat, use $.datepicker.formatDate() to send it the way you want. More specifically, on the form submit use it to re-format any datepickers.

$('form').submit(function() {
   $(this).find('input.yourDatePickerClass').each( function() {
      $dp = $(this);
      $dp.val( $.datepicker.formatDate( 'yy-mm-dd', $dp.datepicker('getDate')) );
   });
});

Old answer:

Take a look at the altFormat option in the datepicker. It lets you display a date format different to the one you're using.

e.g.

$( ".selector" ).datepicker({ altFormat: 'mm-dd-yy' });

Answer 3

altField+altFormat is exactly what you want.

Answer 4

You should always sanitize and format your dates before passing them to the DB. This isn't something that should be handle on the client side. A simple date("Y-m-d", strtotime($date)) should suffice.