How to make flatpickr datepicker reactive in livewire / alpinejs app?

Question

In my laravel 7 /livewire 1.3 / alpinejs 2 project I added flatpickr datepicker from https://flatpickr.js.org datepicker works ok, but reactive does not work. In the code below $current_operation_date - public var in the component and is is modified ok but alpine var operation_date is not changed when in datepicker value is selected:

<div>        
    $current_operation_date::{{$current_operation_date}}<BR>
    operation_date::<div x-html="operation_date"></div>
    <!-- The line above is not modified when in datepicker value is selected -->

    <div x-data="{ operation_date: '{{$current_operation_date}}'}">
        <input
            type='text'
            id="flatpickr_operation_date"
            wire:model.lazy="current_operation_date"

            x-model="operation_date"
            x-on:blur="$dispatch('input', operation_date)"
            class="form-control editable_field"
        />
    </div>

</div>


@section('scripts')
    <script>


        $(document).ready(function(){

            var fp = flatpickr(document.querySelector('#flatpickr_operation_date'), {
                enableTime: false,
                dateFormat: 'Y-m-d',
                altFormat: "F j, Y",
                altInput: true,
                inline: false,
                locale: "es",
                "minDate": "2020-7-12",
                "maxDate": "2020-9-12",
                defaultDate: ["2020-9-10"],
                onChange: function(selectedDates, dateStr, instance) {
                    console.log('selectedDates::')
                    console.log(selectedDates) //valid
                    
                    console.log('date: ', dateStr);
                }
            });

        });
    
    
    
    </script>
@endsection

<style>
   ...

If there is a way to make it reactive ?

Thanks!

Answer 1

Using the TALL stack with Livewire 2.7, alpine 3.4 and Laravel 8 This is my current solution

components/inputs/date.blade.php

@props(['options' => []])

@php
    $options = array_merge([
                    'dateFormat' => 'Y-m-d',
                    'enableTime' => false,
                    'altFormat' =>  'j F Y',
                    'altInput' => true
                    ], $options);
@endphp

<div wire:ignore>
    <input
       x-data="{
           init() {
               flatpickr(this.$refs.input, {{json_encode((object)$options)}});
           }
        }"
        x-ref="input"
        type="text"
        {{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
    />
</div>

Then I'm using it like this:

<x-inputs.date id="flatpickr_operation_date" wire:model="current_operation_date" />

---

bidirectional

To go deeper, when we want to dynamically change the date from the Livewire component and we want the date to be updated in flatpickr as well, here's my current solution

---

here's my current solution

@props(['options' => []])

@php
    $options = array_merge([
                    'dateFormat' => 'Y-m-d',
                    'enableTime' => false,
                    'altFormat' =>  'j F Y',
                    'altInput' => true
                    ], $options);
@endphp

<div wire:ignore>
    <input
        x-data="{
             value: @entangle($attributes->wire('model')), 
             instance: undefined,
             init() {
                 $watch('value', value => this.instance.setDate(value, false));
                 this.instance = flatpickr(this.$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>