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

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!

Clément Baconnier · Accepted Answer · 2021-11-19 13:48:01Z

28

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>

edited Nov 19, 2021 at 13:48

answered Oct 1, 2020 at 12:52

Clément Baconnier

6,2126 gold badges35 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ilian Andreev Over a year ago

Do you know how I can use the locale with this code? For example Bulgarian language.

Clément Baconnier Over a year ago

There 2 ways; 1) You can set the locale globally 2) add the locale; then in the array_merge add 'locale' => 'bg' note: You can override the locale <x-inputs.date :options="['locale' => 'bg']" wire:model="date"/>

Pragnesh Chauhan Over a year ago

when I use wire:model="employee.date" it is not working.

Clément Baconnier Over a year ago

@PragneshChauhan Does date exists on your array ? If yes, please, do open a new SO question with a reproducible example.

Pragnesh Chauhan Over a year ago

@ClémentBaconnier, thank you for quick reply, date was not set in component that cause issue

|

Collectives™ on Stack Overflow

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

1 Answer 1

bidirectional

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

bidirectional

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related