Working with Javascript Components
Updating Livewire using Bootstrap DatePicker
Not TALL stack, but this note useful for Livewire + Bootstrap projects when trying to bring Livewire to an older project
If possible, just use the native controls such as type='date'
When using Bootstrap date picker, just using wire:model on the field is not going to work. Livewire needs telling that the Input field has changed.
1
<input
2
wire:model="taskduedate"
3
type="text" class="form-control datepicker" placeholder="Due Date" autocomplete="off"
4
data-provide="datepicker" data-date-autoclose="true" data-date-format="mm/dd/yyyy" data-date-today-highlight="true"
5
onchange="this.dispatchEvent(new InputEvent('input'))"
6
>
Copied!
Livewire is looking for an input event to know that the field is dirty. The date picker seems to not trigger any input events, but it does trigger a regular input onchange event. We can hook into this and dispatch an input event. This causes Livewire to sync the field with the server.
This strategy may work with other similar components.
Last modified 1yr ago
Copy link