livewire alpine flatpickr getting null

Question

I can't get this to give me the dd() of the date. It keeps coming back as null. i've implemented flatpickr correctly and all works accept when i try to get the actual date. However, when i add an additional button to submit the date with wire directive it works. But i want it to fire when a date is clicked. Any help would be appreciated. Thanks

in my livewire file.

public $date;
public function secondStepSubmit()
    { dd('date');
    };

in my view

 <input x-data x-init="flatpickr($refs.input, null);" wire:change="secondStepSubmit" x-ref="input" type="text" />
   </div>

Irfan Irfan · Accepted Answer · 2021-02-09T08:34:34

flatpickr has its own change event listener. you can use that to get the value of the date of the input as follows.

<div>
  <input x-data x-init="flatpickr($refs.input, {
    onChange: function(dateObj, dateStr) {
        @this.call('secondStepSubmit', dateStr)
    }
  });" x-ref="input" type="text" />
</div>

I have used @this blade directive from livewire, we also can use $wire from alpine too.

in the Livewire component,


 public function secondStepSubmit($date)
 {
    dd($date);
 }

livewire alpine flatpickr getting null

1 Answers