Livewire and Pikaday UK Dates

#1

What seems to be the problem:

I’m struggling to get the Pikaday date picker working with UK formatted dates, ie. DD/MM/YYYY
The Surge lesson, "Building Data Tables - Lesson Edit Modal " covers this nicely - for US dates :wink:

I’ve checked out the Surge repo and made the following changes to the code:

1: Updated the Mutator / Accessor on the Transaction model that holds the date field.

    public function getDateForEditingAttribute()
    {

//        return $this->date->format('m/d/Y');
        return $this->date->format('d/m/Y');
    }



    public function setDateForEditingAttribute($value)
    {
//        $this->date = Carbon::parse($value);

        $this->date = Carbon::createFromFormat('d/m/Y', $value);

    }

2: Updated the Livewire Date Picker Component date.blade.php with UK formatting.

<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="flex rounded-md "
>


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

Steps to Reproduce:

Upon clicking a date, the Edit Modal appears. The date appears correctly in DD/MM/YYYY format.
Clicking on the date field opens the Pikaday widget, however the date shown on the modal date field is not highlighted / selected in the widget.

If I select a new date in the widget, straight away I can see the date on the field is correctly updated in the correct format to reflect the change.
Pressing the Save button on the form correctly saves the date to the DB.

Basically, when open the pickaday widget, the correct date is not getting set.

I’m thinking I need to do something to the onOpen() callback defined above to perhaps set the correct format?

The modal and pikaday work perfectly if I revert back to MM/DD/YYYY in the component and on the decorators

Are you using the latest version of Livewire:
Yes

Do you have any screenshots or code examples:

Just my changes above base on the livewire/surge repo

#2

I can get the Pikaday calendar to show the current model date by changing the onOpen() to read as follows

x-init="new Pikaday({ field: $refs.input, format: 'DD/MM/YYYY', onOpen() { this.setDate(moment($refs.input.value,'DD/MM/YYYY').toDate() ) } })"

The UK formatted date is displayed when the Pikaday calendar opens. When a date is selected, the date field on the modal form is correctly updated.

I still don’t understand why the previous didn’t work as we have already taken care of the date formatting on the model with an accessor and mutator. Unless, Pikaday defaults to some standard date layout internally when a date is selected.

Anyway, hope this helps someone else.