Why after clearing filters I see date label on datepicker?

Question

Looking at this How to make flatpickr datepicker reactive in livewire / alpinejs app? branch I try to add datepicker to my form . I use bidirectional part - as on my for with several filter inputs and I also have clear filter button clicking by which all filters are cleared. This button works ok, all filters on livewireare side are cleared, but I still see date label value : https://prnt.sc/1xg8fsc

I have component 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');
    }
}

Template resources/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="{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>

Filters defined in my component and clear method:

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', []);

    }

and datepicker in my template :

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

How this issue can be fixed ?

Thanks!

Answer 1

Code:

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

Fixed this issue!