Question

We have a request from many customers to make our datepickers reflect the date format they have chosen to use in our app. Unfortunately, we use datepickers a lot, so going to each one and making sure that the date is still properly parsed is a last resort.

Right now I have translated the date format they chose into the corresponding date format for the datepicker, and simply set the default dateFormat to that.

<?php
// set default datepicker date format depending on their date format
$phpToJsDateFormats = array(
    'j M Y' => 'd M yy',
    'Y-m-d' => 'yy-mm-dd',
    'm-d-Y' => 'mm-dd-yy',
    'd-m-Y' => 'dd-mm-yy',
    'n/j/Y' => 'm/d/yy',
    'j/n/Y' => 'd/m/yy',
    'F jS, Y' => 'MM d, yy',
);
$jqueryDateFmt = $phpToJsDateFormats[ $settings['Config']['format_date'] ];
?>
<script type="text/javascript">
$.datepicker.setDefaults({
    dateFormat: "<?php echo $jqueryDateFmt ?>"
});
</script>

To make this a simple fix, I was wondering if there was a way I could mask the actual value of the datepicker so the value we show the user is in their date format, but the value the datepicker actually submits is the default format that we already use. I’m thinking of something along the lines of a global form onsubmit, and something similar for forms submitted via AJAX, but I don’t know. Maybe jQuery has something cool built into their datepicker that I don’t know about.

Any ideas would be greatly appreciated. Thanks!

Answer 1

Use altFormat

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

This allows one date format to be shown to the user for selection
purposes, while a different format is actually sent behind the scenes.