Jquery datepicker format date not working

Question

Here is my code:

$(function () {
    $(\"#datepicker\").datepicker({ dateFormat: \'DD-MM-YY\' });
});

And the datetime picker is shown, but

Answer 1

If you're getting the default date value from your backend framework/service, i.e., Asp.Net MVC, setting the dateFormat when you initiate the datepicker on your input won't format the date initially.

$(function() {
    $('#date-start').datepicker({
        dateFormat: 'mm/dd/yy',
        onSelect: function(startDate) {
            ...
        }
    });
});

The screenshot above shows, even I am initializing the input with a short date like 03/15/2018, the datepicker won't pick up the format initially. All selections afterward would work as expected.

The fix is you have to set the dateFormat option manually after the datepicker initialization:

$(function() {
    // $('#date-start').datepicker({
    //     dateFormat: 'mm/dd/yy',
    //     onSelect: function(startDate) {
    //         ...
    //     }
    // });
    // $('#date-start').datepicker('option', 'dateFormat', 'mm/dd/yy');

    // Or you can chain them
    $('#date-start').datepicker({
        dateFormat: 'mm/dd/yy',
        onSelect: function(startDate) {
            ...
        }
    }).datepicker('option', 'dateFormat', 'mm/dd/yy');
});