You dispatch an event, but you listen to it ?
https://laravel-livewire.com/docs/2.x/events#event-listeners
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm using livewire with laravel. I'm trying to implement the Pikaday date picker. The picker seems to work fine. It allows me to select the date. The onSelect action fires (which is where I have $dispatch('input', date)). But watching my network console, the component never gets called. I also added the x-on:change to the root object to do the same.
Here's the component blade:
<div
x-data=""
x-on:change="$dispatch('input', moment($event.target.value).format('{{ $format }}'));"
x-init="new Pikaday({ field: $refs.input, onSelect: function (date) { $dispatch('input', date)); }});"
class="relative form-floating mb-3 xl:w-48">
<input
x-ref="input"
type="text"
{{ $attributes }}
/>
<label wire:ignore for="{{ $attributes['label'] }}" class="text-gray-700">{{ $attributes['label'] }}</label>
</div>
Here's the part of the main blade that loads the component blade:
<x-set-date wire:model="start_date" name="start_date" id="start_date" autocomplete="off" placeholder="Start Date"
label="Start Date" format="MM/DD/YYYY" />
Lastly, here's my Livewire component class for "set-date":
class SetDate extends Component
{
public $start_date;
public $end_date;
public $rules = [
'start_date' => 'date',
'end_date' => 'date'
];
public function mount() {
$this->start_date = session('start_date', date('Y-m-d', strtotime('-7 days')));
$this->end_date = session('end_date', date('Y-m-d'));
}
public function render()
{
return view('livewire.set-date');
}
public function setStartDate() {
$this->validate();
$start_date = Carbon::parse($this->start_date)->format('Y-m-d');
session(['start_date' => $start_date]);
}
public function setEndDate() {
$this->validate();
$end_date = Carbon::parse($this->end_date)->format('Y-m-d');
session(['end_date' => $end_date]);
}
}
When I click into the date picker, it comes out (using tailwind css and Pikaday date picker with all js/css loaded along with livewire scripts etc).
I added console.log(date) to the onSelect and to the x-on:change lines to ensure that I'm getting the correct data. But watching Chrome's network tab, there's no call made back to set-date component.
Can anyone help?
Please or to participate in this conversation.