Datepicker input is erased and cannot be submitted

#1

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 some event in 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:

<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?

#2

HI!
try this:
input
x-data
x-ref="{{$id}}"
name="{{$id}}"
wire:model.lazy="{{$id}}"
x-init="
moment.locale(‘hu’);
var daDate = {
previousMonth: ‘Előző hónap’,
nextMonth: ‘Következő hónap’,
months: moment.localeData()._months,
weekdays: moment.localeData()._weekdays,
weekdaysShort: moment.localeData()._weekdaysShort
};
new Pikaday({ field:$refs.{{$id}}, firstDay: 1, format:‘YYYY-MM-DD’, showWeekNumber:true, i18n: daDate, })"
@change="$dispatch(’{{$id}}’,$event.target.value)"
type=“text”
autocomplete=“off”
{{ $attributes }}
/>