jQuery datepicker posting wrong date value

Question

I am using the jQuery datepicker to request date input from the user. I have set the local defaults and have it producing the correct date format that I want (dd/mm/yyyy). For some reason this date is posted in the form (mm/dd/yyyy) - how do I ensure that the correct format is posted?

Setting up the defaults:

jQuery(function($) {
    $.datepicker.regional['en-GB'] = {
        monthNames: [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ],
        monthNamesShort: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        dayNames: [
            'Sunday',
            'Monday',
            'Tuesday',
            'Wednesday',
            'Thursday',
            'Friday',
            'Saturday'
        ],
        dayNamesShort: [
            'Sun',
            'Mon',
            'Tue',
            'Wed',
            'Thu',
            'Fri',
            'Sat'
        ],
        dayNamesMin: [
            'Su',
            'Mo',
            'Tu',
            'We',
            'Th',
            'Fr',
            'Sa'
        ],
        dateFormat: 'dd/mm/yy', 
        firstDay: 1,
        renderer: $.datepicker.defaultRenderer,
        prevText: 'Prev', 
        prevStatus: 'Show the previous month',
        prevJumpText: '<<', 
        prevJumpStatus: 'Show the previous year',
        nextText: 'Next', 
        nextStatus: 'Show the next month',
        nextJumpText: '>>', 
        nextJumpStatus: 'Show the next year',
        currentText: 'Current',
        currentStatus: 'Show the current month',
        todayText: 'Today',
        todayStatus: 'Show today\'s month',
        clearText: 'Clear',
        clearStatus: 'Erase the current date',
        closeText: 'Done',
        closeStatus: 'Close without change',
        yearStatus: 'Show a different year',
        monthStatus: 'Show a different month',
        weekText: 'Wk',
        weekStatus: 'Week of the year',
        dayStatus: 'Select DD, M d',
        defaultStatus: 'Select a date',
        isRTL: false
    };
    $.datepicker.setDefaults($.datepicker.regional['en-GB']);
});

Initialising the datepicker

    $(".datepicker").each(function () {
        $(this).datepicker({
            onSelect: onSelectHandler
        });
    });

Answer 1

You should just need to do this:

$( "#datepicker" ).datepicker({ dateFormat: 'dd-mm-yy' });

Check out this simple jsFiddle demo.

EDIT: Looks like your code works for me. Made a new fiddle with your code. Also, you don't need to do a .each(). Just $(".datepicker").datepicker({onSelect: onSelectHandler}); should work.

Answer 2

If you are using the UI Jquery, set the correct format when initialize, like this:

$(".selector").datepicker({dateFormat: 'dd/mm/yy'});