如何在livewire / alpinejs应用中使Flatpickr Datepicker具有反应性？

问题描述

在我的laravel 7 / livewire 1.3 / alpinejs 2项目中 我从https://flatpickr.js.org添加了flatpickr datepicker datepicker可以正常工作，但反应式则行不通。在下面的代码中 $ current_operation_date-组件中的公共变量，已被修改确定 但是，当在日期选择器值被选择高山变种operation_date没有改变：

<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>
   ...

是否有使其反应的方法？

谢谢！

解决方法

将TALL堆栈与Livewire 2，alpine 2.7和Laravel 8一起使用 这是我目前的解决方案

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
        x-init="flatpickr($refs.input,{{json_encode((object)$options)}});"
        x-ref="input"
        type="text"
        {{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
    />
</div>

然后我像这样使用它：

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