为什么清除过滤器后我在日期选择器上看到日期标签？

Question

看看这个 如何使 flatpickr datepicker 在 livewire / alpinejs 应用程序中反应？ 分支我尝试将日期选择器添加到我的表单中。我使用双向部分 - 就像我的 for 有几个过滤器输入一样 我还有清除过滤器按钮，单击该按钮将清除所有过滤器。此按钮工作正常，所有过滤器都打开 livewireare 一侧已清除，但我仍然看到日期标签值： https://prnt.sc/1xg8fsc

我有组件 app/View/Components/inputs/Datepicker.php :

<?php

namespace App\View\Components\inputs;

use Illuminate\View\Component;

class Datepicker extends Component
{
    public function __construct()
    {
        //
    }

    public function render()
    {
        \Log::info( '-1 app/View/Components/inputs/Datepicker.php ::'  );
        return view('components.inputs.datepicker');
    }
}

模板资源/组件/输入/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="{value: @entangle($attributes->wire('model')), instance: undefined}"
        x-init="() => {
                $watch('value', value => instance.setDate(value, false));
                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>

我的组件和clear方法中定义的过滤器：

class CrudUsers extends Component
{
    use
    public $filters
        = [
            'name'             => '',
            ...
            'activated_at_date_from'           => '',
            ...
        ];


    public function clearAllFilter()
    {
        $this->filters = [
            'name'             => '',
            ...
            'activated_at_date_till'           => '',
        ];
        \Log::info(varDump($this->filters, ' -1 clearAllFilter $this->filters::'));

//        $this->dispatchBrowserEvent('adminUserEditorClearAllFilter', []);

    }

和我的模板中的日期选择器：

   <x-inputs.datepicker id="activated_at_date_from"
        wire:model="filters.activated_at_date_from"/>

如何解决这个问题？

谢谢！

Answer 1

代码：

            if (document.getElementById("activated_at_date_from")) {
                flatpickr(document.getElementById("activated_at_date_from")).clear()
            }

解决了这个问题！