如何在 livewire / alpinejs 应用程序中使 flatpickr datepicker 反应？

Posted 2023-02-22

【中文标题】如何在 livewire / alpinejs 应用程序中使 flatpickr datepicker 反应？

【英文标题】：How to make flatpickr datepicker reactive in livewire / alpinejs app?

【发布时间】：2020-12-06 06:51:59

【问题描述】：

在我的 laravel 7 /livewire 1.3 / alpinejs 2 项目中 我从https://flatpickr.js.org 添加了flatpickr datepicker datepicker 工作正常，但反应式不起作用。在下面的代码中 $current_operation_date - 组件中的公共 var 并且被修改好 但是在选择 datepicker 值时，alpine var 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>
   ...

如果有办法让它反应？

谢谢！

【参考方案1】：

在 Livewire 2.7、alpine 3.4 和 Laravel 8 中使用 TALL 堆栈 这是我目前的解决方案

组件/输入/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>

那我就是这样用的：

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

---

双向

更深入地讲，当我们想要从 Livewire 组件动态更改日期并且我们希望在 flatpickr 中更新日期时，这是我当前的解决方案

---

这是我目前的解决方案

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

【讨论】：

你知道我如何使用这个代码的语言环境吗？例如保加利亚语。

有两种方法； 1) 你可以set the locale globally 2) add the locale;然后在array_merge 添加'locale' => 'bg' 注意： 您可以覆盖语言环境<x-inputs.date :options="['locale' => 'bg']" wire:model="date"/>

当我使用 wire:model="employee.date" 时它不起作用。

@PragneshChauhan date 是否存在于您的阵列上？如果是，请使用可重现的示例打开一个新的 SO 问题。

@ClémentBaconnier，感谢您的快速回复，导致问题的组件中未设置日期