0

Laravel8, Jetstream, Livewire. Installed normally and adding usual CRUD functions. So far so good, until I noticed the following problem after I added Alpine.js and Pikaday to the form.

  • Pikaday works fine when clicked and the selected date is set to the input field.
  • However, the field is set back to the original value (so it's erased when the original value was null) about 1 second after I do something on any other parts of the form (input other fields, press the button, etc.) and the selected date cannot be saved to DB.
  • If I typed in a date manually, no problem occurs and the date is saved to DB.

I'm new to Livewire and implemented my code as instructed here: https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker

<form wire:submit.prevent="schedule">        
    <label for="xxxxDate">xxxx date:</label>
    <x-date-picker wire:model="xxxx_date" id="xxxxDate"/>

views/components/date-picker.blade.php

<div wire:ignore>
    <input
        x-data=
        x-ref="input"
        x-init="new Pikaday({ field: $refs.input });"
        type="text"
        {{ $attributes }}
    >
</div>

Any clue?

mmrn
  • 249
  • 2
  • 8
  • 18
  • There's an example on the Pikaday controller in the [official Livewire docs](https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker). My guess is that `wire:model` isn't connected to the input itself, and possibly that you have `wire:ignore` on the parent element? That controller doesn't do any domdiffing as far as I know, so that `wire:ignore` directive is probably not needed. – Qirel Mar 30 '21 at 08:25
  • I removed wire:ignore from date-picker.blade.php, but the result was the same. I can't see any essential difference between my implementation and the official one. Is there any working example with complete codes? – mmrn Mar 31 '21 at 03:55
  • in the layouts make sure you're including the livewire CSS and scripts stuff. I had the same random issues. It was because I was missing those in my "master file" documented here https://laravel-livewire.com/docs/2.x/quickstart – Zach Robichaud Apr 06 '21 at 14:00

0 Answers0