Livewire et flatpickr : changements lors de la gestion des données vides

Question

Avertissement : Je sais qu'il y a eu quelques questions sur la façon de coupler Livewire et flatpickr, mais je ne comprends pas les solutions proposées car elles sont très différentes de la façon dont j'aborde le problème. Cela dit, j'apprends encore Livewire, donc je me trompe peut-être.

J'ai un composant Livewire dans lequel j'utilise flatpickr pour sélectionner la date et l'heure.

<div class="mb-3" >
    <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" 
               wire:model.debounce.500ms="chosendatetime" />
</div>

Dans le composant blade, j'ai également une section de script pour initialiser flatpickr :

<script>
    flatpickr("#chosendatetime", {
        enableTime: true,
        dateFormat: "d-m-Y H:i",
    });
</script>

Le sélecteur de date est rendu correctement, mais lorsque je modifie sa valeur, les données envoyées par le client sont vides.

Que dois-je faire ?

Answer 1

Votre code fonctionne correctement si vous configurez correctement Livewire.

• Assurez-vous d'avoir une propriété publique appelée chosendatetime dans votre classe Livewire public $chosendatetime;
• Ajoutez une fonction appelée updatedChosenDatetime() et imprimez dd()$this->chosendatetime en utilisant pour voir si la valeur a été reçue
• Assurez-vous d'inclure @livewireStyles和@livewireScripts
dans votre modèle de mise en page
• Assurez-vous d'avoir inclus le JS et le CSS de FlatPickr

Le code de la classe Livewire est le suivant :

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class FlatPickr extends Component
{
    public $chosendatetime;

    public function updatedChosenDatetime()
    {
        dd($this->chosendatetime);
    }

    public function render()
    {
        return view('livewire.flat-pickr');
    }
}

Answer 2

Essayez d'ajouter wire:ignore à l'élément div comme ceci :

<div class="mb-3" wire:ignore>
    <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" 
               wire:model.debounce.500ms="chosendatetime" />
</div>

Cette directive indique à Livewire qu'il doit ignorer cette partie de la page et la laisser inchangée lors de l'actualisation du composant. Si vous ne l'utilisez pas, Livewire peut remplacer l'instance flatpickr et l'empêcher de fonctionner.