Feature Request: add event listener for filter functions to LivewireDatatable

Hi!
I wanted to use date filter option using a custom date picker library that we use it for Persian date.
So, I did some changes in "resources/views/livewire/datatables/filters/date.blade.php" file.
first of all, I had to change input type of date filters from 'date' to 'text' because the 'date' type does not support Persian itself. as you may know wire:change is not working this way and the Persian date picker also has a function called onSelect so I used that to convert the Persian date to Gregorian and also added an attribute to the inputs called index to store $index for passing it to doDateFilter functions.
in the end I used window.livewire.emit('doDateFilter' , index , gDate) to call the function and pass the arguments but it's not working because there is no listeners for it!
PS: the index and gDate properties are correctly formatted to use in 'doDateFilter' functions!

please add listeners for filter functions in "src/Http/Livewire/LivewireDatatable.php" especially for 'doDateFilterStart' and 'doDateFilterEnd' functions.

thanks so much.
Here you can see my modified date.blade.php file:

<div x-data class="flex flex-col">
    <div class="w-full relative flex">
        <input x-ref="start"
               class="text-left w-full m-1 text-sm leading-4 block rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
               type="text"
               id="startDateAlt"
               index="{{$index}}"
               style="padding-right:3rem"/>
        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
            <button
                class="datepicker-range-from -mb-0.5 pr-1 flex text-gray-500 hover:text-gray-700 focus:outline-none">
                <i class="fa-duotone fa-calendar-day fa-lg"></i>
            </button>
            <button x-on:click="$refs.start.value=''" wire:click="doDateFilterStart('{{ $index }}', '')"
                    class="-mb-0.5 pr-1 flex text-gray-400 hover:text-red-600 focus:outline-none" tabindex="-1">
                <i class="fa-regular fa-circle-xmark fa-lg"></i>
            </button>
        </div>
    </div>
    <div class="w-full relative flex items-center">
        <input x-ref="end"
               class="text-left w-full m-1 text-sm leading-4 block rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
               type="text"
               id="endDateAlt"
               index="{{$index}}"
               style="padding-right:3rem"/>
        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
            <button
                class="datepicker-range-to -mb-0.5 pr-1 flex text-gray-500 hover:text-gray-700 focus:outline-none">
                <i class="fa-duotone fa-calendar-day fa-lg"></i>
            </button>
            <button x-on:click="$refs.end.value=''" wire:click="doDateFilterEnd('{{ $index }}', '')"
                    class="-mb-0.5 pr-1 flex text-gray-400 hover:text-red-600 focus:outline-none" tabindex="-1">
                <i class="fa-regular fa-circle-xmark fa-lg"></i>
            </button>
        </div>
    </div>

    <script>
        $('.datepicker-range-from').persianDatepicker({
            altField: '#startDateAlt',
            altFormat: 'YYYY/MM/DD',
            autoClose: 'true',
            initialValue: false,
            onSelect: function (unix) {
                let index = $($(this).attr('altField')).attr('index');
                let gDate = new Date(unix);
                let dd = gDate.getDate();
                let mm = gDate.getMonth() + 1;
                let yyyy = gDate.getFullYear();
                if (dd < 10) {
                    dd = `0${dd}`;
                }
                if (mm < 10) {
                    mm = `0${mm}`;
                }
                gDate = `${yyyy}-${mm}-${dd}`;
                window.livewire.emit('doDateFilterStart', index, gDate);
            }
        });
        $('.datepicker-range-to').persianDatepicker({
            altField: '#endDateAlt',
            altFormat: 'YYYY/MM/DD',
            autoClose: 'true',
            initialValue: false,
            onSelect: function (unix) {
                let index = $($(this).attr('altField')).attr('index');
                let gDate = new Date(unix);
                let dd = gDate.getDate();
                let mm = gDate.getMonth() + 1;
                let yyyy = gDate.getFullYear();
                if (dd < 10) {
                    dd = `0${dd}`;
                }
                if (mm < 10) {
                    mm = `0${mm}`;
                }
                gDate = `${yyyy}-${mm}-${dd}`;
                window.livewire.emit('doDateFilterEnd', index, gDate);
            }
        });

    </script>
</div> 

Start with src/Http/Livewire/LivewireDatatable.php and inspect how doDateFilterStart and doDateFilterEnd are currently invoked. Compare those methods with the doDateFilterStart and doDateFilterEnd events emitted by resources/views/livewire/datatables/filters/date.blade.php. Done means the emitted events reach the corresponding filter functions and preserve the existing date-filter behavior.