Datepicker wont work with the new wire:navigate feature of livewire

[atenadadkhah]

Livewire 3 has introduced a new feature called wire:navigate that you can add it to <a> tags and then after clicking on that link, page wont reload and it will navigate to the next URL. Just like SPA frameworks. https://livewire.laravel.com/docs/navigate

But when I use JalaliDatePicker with wire:navigate feature of livewire, every time I navigate to the page I've used JalaliDatePicker in, and click on the datepicker input, it doesn't open. But as soon as I reload the page everything will be fine, as a result I found out that the problem is with navigating through the pages and not reloading them because of wire:navigate.

But livewire has introduced a solution for this here https://livewire.laravel.com/docs/navigate#dont-rely-on-domcontentloaded and it works for any other JS library except this library which is so vital for my application.

Here is my code in a Laravel blade component:

<x-input-group field="date" label="تاریخ جلسه" autocomplete="one-time-code" data-jdp
                           data-jdp-min-date="{{ \Morilog\Jalali\Jalalian::forge('tomorrow')->format('Y/m/d') }}"/>

@script
<script>
    jalaliDatepicker.updateOptions({
        minDate: 'attr',
    })
</script>
@endscript

And this is that input-group Laravel component which I've used in the above code:

@props([
    'model' => null,
    'field' => null,
    'label' => null,
    'updateType' => 'blur',
])

<div>
    <div class="input-group">
        @if($updateType === 'blur')
            <x-input id="{{ $field }}" wire:model.blur="{{ $model ?? $field }}" name="{{ $field }}" type="text"
                     placeholder=" " {{ $attributes }} />
        @elseif($updateType === 'live')
            <x-input id="{{ $field }}" wire:model.live.debounce="{{ $model ?? $field }}" name="{{ $field }}" type="text"
                     placeholder=" " {{ $attributes }} />
        @else
            <x-input id="{{ $field }}" wire:model="{{ $model ?? $field }}" name="{{ $field }}" type="text"
                     placeholder=" " {{ $attributes }} />
        @endif
        <x-label for="{{ $field }}">{{ $label }}</x-label>
    </div>
    <x-input-error for="{{ $field }}"/>
</div>

And this is my app.js which I've imported this library in:

import '@majidh1/jalalidatepicker'

jalaliDatepicker.startWatch({
    zIndex: 20,
})

Can you please check the problem?

Thank you in advance.

[majidh1]

Hello, There's no need to update the config. It's better if you set minDate to 'attr' right from the start in this example. For sample:

jalaliDatepicker.startWatch({
    zIndex: 20,
    minDate: 'attr'
});

JalaliDatepicker will detect any input with data-jdp attribute, so there's no need to call updateOptions and startWatch again.

Another thing to ensure is that the value of the data-jdp-min-date attribute is correctly set and follows the proper pattern. For example:

data-jdp-min-date="1403/05/09" // Correct
data-jdp-min-date="1403/5/9" // Incorrect