Flatpickr wrapped with Alpine.js in blade component for Laravel Livewire

datepicker.blade.php

<div x-data="datepicker(@entangle($attributes->wire('model')))" class="relative">
    <div class="flex flex-col">
        <label>Date</label>
        <div class="flex items-center gap-2">
            <input type="text" x-ref="myDatepicker" x-model="value">
            <span class="cursor-pointer underline" x-on:click="reset">
                <x-icon.x></x-icon.x>
            </span>
        </div>
    </div>
</div>

@once
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('datepicker', (model) => ({
                value: model,
                init(){
                    this.pickr = flatpickr(this.$refs.myDatepicker, {})

                    this.$watch('value', function(newValue){
                        this.pickr.setDate(newValue);
                    }.bind(this));
                },
                reset(){
                    this.value = null;
                }
            }))
        })
    </script>
@endonce

event-form.blade.php

<div class="bg-dark">
    <div class="grid place-items-center min-h-screen">
        <div class="shadow rounded p-4 border bg-white  h-[278px] flex flex-col gap-4">
            <h1 class="text-xl font-semibold text-gray-700">Event form</h1>
            <div class="space-y-4">

                <x-datepicker label="Starts at" wire:model="event.starts_at">

                </x-datepicker>

                <x-datepicker label="Ends at" wire:model="event.ends_at">

                </x-datepicker>

            </div>
            <div>
                <button
                    class="bg-success-500 text-white px-2 py-1 rounded"
                    wire:click="startToday()"
                >
                    Start Today
                </button>
            </div>
        </div>
    </div>
</div>

EventForm.php

<?php

namespace App\Http\Livewire;

use App\Models\Event;
use Livewire\Component;

class EventForm extends Component
{
    public $event;

    public function rules()
    {
        return [
            'event.starts_at' => ['required'],
            'event.ends_at' => ['required'],
        ];
    }

    public function mount()
    {
        $this->event = Event::make();
    }

    public function startToday()
    {
        $this->event->starts_at = today()->format('Y-m-d');
        $this->event->ends_at = today()->format('Y-m-d');
    }

    public function render()
    {
        return view('livewire.event-form');
    }
}

This is how I've got it working (with some help from Copilot):

<div x-data="datepicker(@entangle($attributes->wire('model')))" class="relative">
    <div class="flex flex-col">
        <div>
            <input type="date" x-ref="myDatepicker" x-model="value" placeholder="dd-mm-yyyy"
                class="block w-full rounded-md border-0 py-2 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            >
            <span class="cursor-pointer underline" x-on:click="reset">
            </span>
        </div>
    </div>
</div>

@once
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('datepicker', (model) => ({
                value: model,
                init(){
                    this.pickr = flatpickr(this.$refs.myDatepicker, {
                        // Options here
                        minDate: "today",
                        dateFormat: "Y-m-d"
                    });

                    this.$watch('value', function(newValue){
                        this.pickr.setDate(newValue);
                    }.bind(this));
                },
                reset(){
                    this.value = null;
                }
            }))
        })
    </script>
@endonce

Hope this helps someone :-)

I've run into an issue with multiple datepickers on the same page - they both preload with the same value when the component properties both have an existing values. I think it's something to do with the x-model being the same (x-model="value") for both datepickers.

I've spent hours trying to solve this with my very limited alpine skills :(

<div wire:ignore x-data="datepicker(@entangle($attributes->wire('model')))" class="relative">    
    <x-input class="mt-1 block w-full" x-ref="myDatepicker" x-model="value" id="{{ rand() }}" />    
</div>

@once
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('datepicker', (model) => ({
                value: model,
                init(){
                    this.pickr = flatpickr(this.$refs.myDatepicker, {dateFormat:'d/m/Y'})

                    this.$watch('value', function(newValue){
                        this.pickr.setDate(newValue);
                    }.bind(this));
                },
                reset(){
                    this.value = null;
                }
            }))
        })
    </script>
@endonce

<div class="mb-5" wire:ignore>        
    <x-label value="Date" />
    <x-datepicker wire:model="date" />
    <x-input-error for="date" class="mt-2" />
</div>  

<div class="mb-5" wire:ignore>        
    <x-label value="Today" />
    <x-datepicker wire:model="today" />
    <x-input-error for="today" class="mt-2" />
</div>

Greetings, I'm sharing my version for month selection. It works with multiple inputs and Livewire navigation.

This particular case is for selecting months, although it can be adapted for full date selection.

<div x-data="datepicker(@entangle($attributes->wire('model')))" class="relative" wire:ignore>
    <div class="flex flex-col">
        <div class="flex items-center gap-2">
            <input type="text" x-ref="myDatepicker" x-model="value" placeholder="Select month" class="form-control">
        </div>
    </div>
</div>

@once
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('datepicker', (model) => ({
                value: model,
                init() {
                    this.pickr = flatpickr(this.$refs.myDatepicker, {
                        altInput: true,
                        altFormat: "F Y",
                        dateFormat: "Y-m",
                        plugins: [
                            new monthSelectPlugin({
                                shorthand: true,
                                dateFormat: "Y-m",
                                altFormat: "F Y"
                            })
                        ]
                    });

                    if (this.value) {
                        this.pickr.setDate(this.value, true, "Y-m");
                    }

                    this.$watch('value', function (newValue) {
                        this.pickr.setDate(newValue, true, "Y-m");
                    }.bind(this));
                },
                reset() {
                    this.value = null;
                }
            }))
        })
    </script>
@endonce