Question 199738 in PHP Question posted in
Official manual can be found here.

Php – Livewire and flatpickr: null data on change

Disclaimer: I know there are already a few questions regarding coupling Livewire and flatpickr, yet I don’t understand the solutions provided, since they are very different from how I’m approaching the problem. That said, I’m still learning Livewire, so I might just be doing it wrong.

I have a Livewire component where I use flatpickr to select both date and time.

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

In the blade component, I have also the script section to init flatpickr:

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

The date picker is rendered correctly, but when I change its value the data sent by the client is empty.

What should I do?

Tags:

2

Answers


  1. 0

    Your code is working fine, IF you have setup your Livewire properly.

    • Make sure you have a public property called chosendatetime in your Livewire class public $chosendatetime;
    • Add a function called updatedChosenDatetime() and dd() the $this->chosendatetime to see if the value is received or not
    • Make sure you have included @livewireStyles and @livewireScripts inside your layout blade.
    • Make sure you have included FlatPickr JS and CSS

    The Livewire class will look like

    <?php

namespace AppHttpLivewire;

use LivewireComponent;

class FlatPickr extends Component
{
    public $chosendatetime;

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

    public function render()
    {
        return view('livewire.flat-pickr');
    }
}
    Login or Signup to reply.
  2. 0

    try to add wire:ignore to the div element, like this:

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

    This directive lets Livewire know that it should skip this part of the page and not change it when the component refreshes. If you don’t use it, Livewire could replace the flatpickr instance and make it stop working.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search