jQuery UI datepicker() is ignoring the `format` attribute

Question

I'm formatting a date with the following code:

$('#test-dp-component .input-group.date').datepicker({
                format:'yyyy/mm/dd',
            }).datepicker("setDate",'{{ $module->test }}');

So if the date is September 1, 2021, the displayed format is 2021/09/01. However, if I change the format like this:

$('#test-dp-component .input-group.date').datepicker({
                format:'mm/dd/yyyy',
            }).datepicker("setDate",'{{ $module->test }}');

Then it returns 05/09/1 instead of 09/01/2021. Other formats like mm/yyyy seem to work fine, so why is it freaking out over the mm/dd/yyyy format? Any suggestions?

Does this answer your question? [jQuery UI DatePicker - Change Date Format](https://stackoverflow.com/questions/1328025/jquery-ui-datepicker-change-date-format) — kmoser, Sep 27 '21 at 20:00
2021-09-01 is what is stored in the DB., but it displays as 05/09/1 — John, Sep 27 '21 at 20:00
kmoser - no, unfortunately I tried that already. It returns the same 05/09/1 — John, Sep 27 '21 at 20:04
Okay, so I'm working in Laravel so I decided to use Carbon to format the date in the view. I'm giving up on the javascript, lol — John, Sep 27 '21 at 20:32
Hey, did you ever get around to solving this problem? Does my answer help? — HoldOffHunger, Oct 01 '21 at 21:45

score 1 · Answer 1 · answered Sep 27 '21 at 22:02

First, the attribute is dateFormat, not format. See the example at Api.jQueryUi.com:

dateFormat

Default: "mm/dd/yy"

The format for parsed and displayed dates. For a full list of the possible formats see the formatDate function.

Second, the year field is indicate with yy, not with (as you would normally think), yyyy.

So, you'll want to try:

$('#test-dp-component .input-group.date').datepicker({
    dateFormat:'yy/mm/dd',
});

jQuery UI datepicker() is ignoring the `format` attribute

1 Answers1