DEV Community

Jitesh Dhamaniya
Jitesh Dhamaniya

Posted on

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


<div wire:ignore>
       // entangle local variable to component property.
        variable: @entangle($id).defer 
        new Pikaday({
            field: $refs.input,
            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();
        {{ $attributes }}
Enter fullscreen mode Exit fullscreen mode

And this is how you going to call this component.

                    id="startDate" // this does the thing
Enter fullscreen mode Exit fullscreen mode

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 </>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)