Use @entangle to get Pikaday date value on button click in Laravel Livewire.

Recently i wanted to get Pikaday value to livewire component property on seperate action, rather than onSelect event of Pikaday. But i could not find a solution online and had to do it myself hence writing to help somebody looking for something in future.

And this is the code i used in a blade component e.g

@props(['id'])

<div wire:ignore>
    <input
        class="border"
        x-data="{
       // entangle local variable to component property.
        variable: @entangle($id).defer 
        }"
        x-ref="input"
        x-init="
        new Pikaday({
            field: $refs.input,
            format:'M/D/YYYY',
            toString(date, format) {
                // you should do formatting based on the passed format,
                // but we will just return 'D/M/YYYY' for simplicity
                const day = date.getDate();
                const month = date.getMonth() + 1;
                const year = date.getFullYear();
                return `${year}-${month}-${day}`;
            },
            onSelect: function() {
                // assign selected value to variable 
                variable = this.toString();
            }
        })"
        type="text"
        {{ $attributes }}
    >
</div>

And this is how you going to call this component.

  <x-date-picker                    
                    id="startDate" // this does the thing
                    autocomplete="off"
                    placeholder="Date"
                />

the benefit of this approch is that, this does not fire any livewire event on select, so no trip to server untill i fire using another button like this.

<x-button wire:click="$refresh" secondary class="text-xs"> Search </x-buttons.link>