How to make flatpickr datepicker reactive in livewire / alpinejs app? - flatpickr

Question

In my laravel 7 /livewire 1.3 / alpinejs 2 project
I added flatpickr datepicker from https://flatpickr.js.org
datepicker works ok, but reactive does not work. In the code below
$current_operation_date - public var in the component and is is modified ok
but alpine var operation_date is not changed when in datepicker value is selected:
<div>
$current_operation_date::{{$current_operation_date}}<BR>
operation_date::<div x-html="operation_date"></div>
<!-- The line above is not modified when in datepicker value is selected -->
<div x-data="{ operation_date: '{{$current_operation_date}}'}">
<input
type='text'
id="flatpickr_operation_date"
wire:model.lazy="current_operation_date"
x-model="operation_date"
x-on:blur="$dispatch('input', operation_date)"
class="form-control editable_field"
/>
</div>
</div>
#section('scripts')
<script>
$(document).ready(function(){
var fp = flatpickr(document.querySelector('#flatpickr_operation_date'), {
enableTime: false,
dateFormat: 'Y-m-d',
altFormat: "F j, Y",
altInput: true,
inline: false,
locale: "es",
"minDate": "2020-7-12",
"maxDate": "2020-9-12",
defaultDate: ["2020-9-10"],
onChange: function(selectedDates, dateStr, instance) {
console.log('selectedDates::')
console.log(selectedDates) //valid
console.log('date: ', dateStr);
}
});
});
</script>
#endsection
<style>
...
If there is a way to make it reactive ?
Thanks!

Answer 1

Using the TALL stack with Livewire 2.7, alpine 3.4 and Laravel 8
This is my current solution
components/inputs/date.blade.php
#props(['options' => []])
#php
$options = array_merge([
'dateFormat' => 'Y-m-d',
'enableTime' => false,
'altFormat' => 'j F Y',
'altInput' => true
], $options);
#endphp
<div wire:ignore>
<input
x-data="{
init() {
flatpickr(this.$refs.input, {{json_encode((object)$options)}});
}
}"
x-ref="input"
type="text"
{{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
/>
</div>
Then I'm using it like this:
<x-inputs.date id="flatpickr_operation_date" wire:model="current_operation_date" />
bidirectional
To go deeper, when we want to dynamically change the date from the Livewire component and we want the date to be updated in flatpickr as well, here's my current solution
here's my current solution
#props(['options' => []])
#php
$options = array_merge([
'dateFormat' => 'Y-m-d',
'enableTime' => false,
'altFormat' => 'j F Y',
'altInput' => true
], $options);
#endphp
<div wire:ignore>
<input
x-data="{
value: #entangle($attributes->wire('model')),
instance: undefined,
init() {
$watch('value', value => this.instance.setDate(value, false));
this.instance = flatpickr(this.$refs.input, {{ json_encode((object)$options) }});
}
}"
x-ref="input"
x-bind:value="value"
type="text"
{{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
/>
</div>