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 ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Votre code fonctionne correctement si vous configurez correctement Livewire.
public $chosendatetime;dd()$this->chosendatetime en utilisant pour voir si la valeur a été reçue@livewireStyles和@livewireScriptsLe 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'); } }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.