Pikaday DD/MM/YYYY format opening as MM/DD/YYYY

Question

I have a blade component with the following alpine code

<div
x-data="{ value: @entangle($attributes->wire('model')), picker: undefined }"
x-init="new Pikaday({ field: $refs.input, format: 'DD/MM/YYYY', onOpen() { this.setDate($refs.input.value) } })"
x-on:change="value = $event.target.value"
class="input-group pe-2"
>
<span class="input-group-text">
    <i class="fa-solid fa-calendar-days"></i>
</span>

<input
    {{ $attributes->whereDoesntStartWith('wire:model') }}
    x-ref="input"
    x-bind:value="value"
    class="form-control"
/>
</div>

And I am able to pick a date with DD/MM/YYYY format, the problem is, when I open the datepicker a second time the date that is currently written in the input is considered as MM/DD/YYYY and then the calendar jumps to the wrong month

For example, if I open the datepicker a first time and select the following date 04/11/2021 (In DD/MM/YY is November 4th), then open the datepicker a second time with the current value then it will open 11/04/2021 (In DD/MM/YY is April 11th)

How can I force the datepicker to open the date written in it in DD/MM/YYYY format?

In the head I have defined the scripts in the following order:

1. Alpine
2. Moment
3. Pikaday
4. Bundle mix of js

I am not sure if it is relevant information but I am using laravel-8 and the code above is a blade component (<x-input.date>) that is being used inside a livewire (V2) component

Answer 1

check how you submit pickadate data to backend, there is a formatSubmit option you can define in pickadate. also, check what parsed format string date are you passing to pickadate on load