1

Im trying to make us of the flatpickr event onMonthChange but using via a Livewire method. I am using the answer from this - How to make flatpickr datepicker reactive in livewire / alpinejs app?

But having trouble knowing how to trigger the onMonthChange js event then running livewire method.

views/components/flatpickr.blade.php

@props(['options'])

<div wire:ignore>
    <input
        x-data="{value: @entangle($attributes->wire('model')), instance: undefined}"
        x-init="() => {
                $watch('value', value => instance.setDate(value, true));
                instance = flatpickr($refs.input, {{ json_encode((object)$options) }});
            }"
        x-ref="input"
        x-bind:value="value"
        type="text"
        {{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
    />
</div>

views/livewire/booking-search.blade.php

<div class="col-span-6 sm:col-span-3">
     <label for="datePicker" class="block text-sm text-gray-700 font-semibold">Select Date</label>
            
     <x-flatpickr id="flatpickr_operation_date" wire:model="selectedDate" :options="$options"/> 

</div>

app/Http/Livewire/BookingSearch.php

class BookingSearch extends Component
{
    public $selectedDate;
    public $selectedMonth
    public $options = [
                    'minDate' => 'today',
                    'maxDate' => "2022-05-31",
                    'inline' => true,
                    'monthSelectorType' => 'static',
                    'dateFormat' => 'd-m-Y',
                    'enableTime' => false,
                    'altFormat' =>  'j F Y',
                    'altInput' => true,
                    ];
            

    public function updatedSelectedMonth() {
       dd('foo');
    }

So im trying to get updatedSelectedMonth to run when the month is changed but because its not a input it self, just not sure how to get livewire to fire on the change.

Sorry JS isnt my strongest

Tony Sawlwin
  • 146
  • 1
  • 19
  • 1
    You'll have to listen the flatpickr event onMonthChange and set manually the change to livewire, it's gonna be something like: instance = flatpickr($refs.input, { onMonthChange(function(value) { @this.{{ $model }}.set(value); }); } I'm just not sure how you'll merge the livewire components $options and the onMonthChange function. But we can figure it out on the running – itepifanio Jun 08 '21 at 00:35

0 Answers0