清除过滤器后Flatpickr日期选择器仍显示日期标签如何解决？

根因说明 #

1. 初始化顺序错误：原x-init逻辑先注册值监听事件，后初始化flatpickr实例，部分场景下值变更触发监听时实例还未创建，导致逻辑失效
2. 空值兼容问题：flatpickr的setDate方法仅接收null/undefined/空数组作为清空输入的参数，Livewire侧清空过滤器时传的是空字符串，无法触发清空效果

修复操作 #

第一步：修改日期选择器模板文件 resources/components/inputs/date.blade.php #

调整x-init的执行顺序，同时对空值做兼容转换，修改后的input代码如下：

<div wire:ignore>
    <input
        x-data="{value: @entangle($attributes->wire('model')), instance: undefined}"
        x-init="() => {
                // 先初始化flatpickr实例
                instance = flatpickr($refs.input, {{ json_encode((object)$options) }});
                // 后注册值监听，空值转换为null触发清空
                $watch('value', value => instance.setDate(value || null, false));
            }"
        x-ref="input"
        x-bind:value="value"
        type="text"
        {{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
    />
</div>

可选优化：后端清空逻辑适配 #

也可以在Livewire组件的clearAllFilter方法中，直接将日期字段赋值为null，从数据源侧适配flatpickr的参数要求：

public function clearAllFilter()
{
    $this->filters = [
        'name' => '',
        // 其他非日期字段保持空字符串
        'activated_at_date_from' => null,
        'activated_at_date_till' => null,
    ];
}

两种方案二选一即可，优先推荐修改组件模板的方案，通用性更强，不需要每个调用的地方都做特殊处理。

内容的提问来源于stack exchange，提问作者mstdmstd