1

I have a very simple Livewire component with a text field and a date picker:

<!-- test.blade.php -->
<div>
    <input type="text" wire:model="test" placeholder="Test">
    <input datepicker="" wire:model="start" datepicker-format="dd.mm.yyyy" type="text" placeholder="Datum ...">
</div>


/* Test.php */
class Test extends Component
{

    public $test;
    public $start;

    public function mount()
    {
        $this->start = now()->format('d.m.Y');
    }

    public function render()
    {
        return view('livewire.test');
    }
}

The date picker I use is the Flowbite Datepicker.

When I change the date and then change the test input field, the date picker resets to today date.

What do I need to to to keep the value of start?

What I have already tried? I tried the wire:ignore on the date picker, but this does not help.

JanBoehmer
  • 395
  • 3
  • 14
  • Since a datepicker is client side, it needs to send data to the server. Are you communicating your picked date back to Livewire? E.g. via the AlpineJS `$wire` API? – Yinci Aug 25 '22 at 07:37
  • I do with `wire:model="start"`. That's the Livewire way of doing this. – JanBoehmer Aug 25 '22 at 07:54
  • For some reason this Flowbite Datepicker doesn't launch a "change" event, that's why $start never gets updated actually. Just put a {{$test}}
    {{$start}} in the component to see it is not changing. But if you make the field not a datepicker - it is OK.     – Blum Aug 25 '22 at 12:03
  • Is this a missing feature in the date picker and is this something I could easily implement? – JanBoehmer Aug 25 '22 at 12:14

1 Answers1

3

I made some debugging on this, found in the datepicker code we can use "changeDate" event on the input to connect it to Livewire. Wonder why it is not documented at all. Here is the code:

The component view:

<div>
<input type="text" wire:model="test" placeholder="Test">
<input name="start" id="startInput" inline-datepicker="" wire:model="start" datepicker-format="dd.mm.yyyy" type="text" placeholder="{{$start}}" value="{{$start}}" datepicker-autohide>

<br>
<br>
Actual proprties now:
<hr>
<div>
    {{$test}} <br>
    {{$start}}
</div>
</div>

The component:

namespace App\Http\Livewire;

use Livewire\Component;

class SomeComponent extends Component
{
public $test;
public $start;

protected $listeners = ['changeDate' => 'changeDate'];

public function changeDate($date)
{
    $this->start = $date;
}

public function mount()
{
    $this->start = now()->format('d.m.Y');
}

public function render()
{
    return view('livewire.some-component');
}
}

And the html where the livewire component is being included, together with the js that listens for the Flowbite Datepicker event, and launches the livewire event after that.

<body>
<div>

    <br>
    <br>

    @livewire('some-component')
</div>
<script>
    document.getElementById("startInput").addEventListener("changeDate", function (e) {
        Livewire.emit('changeDate', e.detail.datepicker.inputField.value)
    });
</script>
@livewireScripts
</body>

Works as expected on my side. Cheers

Blum
  • 831
  • 8
  • 18