Filament•2w ago

Custom form field using flatpickr

I'm currently building a custom date range picker to be used as a table filter. The issue is, I can only select a date range and applied the filter once, after that it seems that the flatpickr isn't reinitialized(?). It just becomes a normal text input. blade file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/confetti.css">

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{ }"
        x-init="
            const fp = flatpickr($refs.picker, {
                mode: 'range',
                showMonths: 2,
                dateFormat: 'Y-m-d H:i:ss',
                altInput: true,
                altFormat: 'Y-m-d',
            });

            fp.config.onChange.push((selectedDates, dateStr, instance) => {
                $wire.set('{{ $getStatePath() }}', dateStr);
            });
        "
    >

        <x-filament::input.wrapper
            suffix-icon="heroicon-m-calendar-days"
        >
            <x-filament::input
                type="text"
                x-ref="picker"
                wire:model="{{ $getStatePath() }}"
                placeholder="Select date range"
            />
        </x-filament::input.wrapper>
        
    </div>
</x-dynamic-component>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/confetti.css">

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{ }"
        x-init="
            const fp = flatpickr($refs.picker, {
                mode: 'range',
                showMonths: 2,
                dateFormat: 'Y-m-d H:i:ss',
                altInput: true,
                altFormat: 'Y-m-d',
            });

            fp.config.onChange.push((selectedDates, dateStr, instance) => {
                $wire.set('{{ $getStatePath() }}', dateStr);
            });
        "
    >

        <x-filament::input.wrapper
            suffix-icon="heroicon-m-calendar-days"
        >
            <x-filament::input
                type="text"
                x-ref="picker"
                wire:model="{{ $getStatePath() }}"
                placeholder="Select date range"
            />
        </x-filament::input.wrapper>
        
    </div>
</x-dynamic-component>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Custom form field using flatpickr