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>
Top comments (0)