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}"
        x-init="() => {
                // 当value变化时，更新Flatpickr实例的日期
                $watch('value', value => instance.setDate(value, false));
                // 初始化Flatpickr实例
                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>

// app/Http/Livewire/CrudUsers.php
class CrudUsers extends Component
{
    public $filters = [
        'name'                   => '',
        'activated_at_date_from' => '',
        'activated_at_date_till' => '',
    ];

    public function clearAllFilter()
    {
        $this->filters = [
            'name'                   => '',
            'activated_at_date_from' => '', // 清空日期过滤器
            'activated_at_date_till' => '', // 清空日期过滤器
        ];

        // 分发一个浏览器事件，通知前端清除Flatpickr实例
        $this->dispatchBrowserEvent('clear-flatpickr-date-inputs');
    }
    // ... 其他方法
}

<!-- resources/views/layouts/app.blade.php 或其他包含脚本的文件 -->
<script>
    document.addEventListener('livewire:load', function () {
        // 监听Livewire分发的自定义事件
        window.addEventListener('clear-flatpickr-date-inputs', event => {
            // 获取需要清除的Flatpickr输入框的ID
            const dateInputId = 'activated_at_date_from'; // 示例ID，可根据实际情况调整
            const dateInput = document.getElementById(dateInputId);

            if (dateInput) {
                // 确保Flatpickr实例已存在，然后调用其clear()方法
                // flatpickr() 函数在传入一个DOM元素时，如果该元素上已经有Flatpickr实例，它会返回该实例
                const fpInstance = flatpickr(dateInput);
                if (fpInstance) {
                    fpInstance.clear();
                }
            }
            // 如果有多个日期选择器需要清除，可以循环处理，例如：
            // document.querySelectorAll('.my-datepicker').forEach(el => flatpickr(el).clear());
        });
    });
</script>

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

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