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

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

htmldatepickerlaravel-8laravel-livewirealpine.js


Solution 1:[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

Solution 2:[2]

Instead of using onOpen() { this.setDate($refs.input.value) }, you can instead replace it with defaultDate: $refs.input.value.

There seems to be an unresolved problem when using onOpen but the above solves your problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Prospero
Solution 2 David G

Related Questions