Level 26
When the date values change (likely a callback like onRenderCell), you need to emit the input event with the value. See the docs: https://laravel-livewire.com/docs/2.x/alpine-js#forwarding-wire-model-input-events
May 24, 2022
3
Level 2
datepicker build with Alpine not working in livewire
I have set up a datepicker with alpine but I can't get the value in livewire Laravel component :
<input
wire:ignore
x-data
x-ref="input"
x-init="new AirDatepicker($refs.input, {
isMobile: true,
autoClose: true,
minDate: new Date().toDateString(),
onRenderCell({ date }) {
if (date.getDay() === 5 || date.getDay() === 6) {
return {
disabled: true,
};
}
},
});"
type="text"
class="form-control"
placeholder="Sélectionner une date"
{{ $attributes }}
>
Livewire component :
<x-datepicker wire:model='date_rdv' />
How can i get the value ?
Level 2
@idew Done but how can i get the value in livewire ?
<input
wire:ignore
x-data
x-ref="input"
x-init="new AirDatepicker($refs.input, {
isMobile: true,
autoClose: true,
dateFormat: 'yyyy-MM-dd',
minDate: new Date().toDateString(),
onRenderCell({ date }) {
if (date.getDay() === 5 || date.getDay() === 6) {
return {
disabled: true,
};
}
},
onSelect({date, formattedDate, datepicker}) {
$dispatch('input', formattedDate)
}
});"
type="text"
class="form-control"
placeholder="Sélectionner une date"
>
Level 26
@ahmedmessi Forward the attributes to the input. From the docs:
<input
....
// Forward the any attributes added to the component tag like `wire:model=color`
{{ $attributes }}
>
See Color-picker Blade Component Definition (Commented) for full example. https://laravel-livewire.com/docs/2.x/alpine-js#forwarding-wire-model-input-events
Please or to participate in this conversation.