t1m0n / air-datepicker

Lightweight, dependency-free JavaScript datepicker.
https://air-datepicker.com
MIT License
2.58k stars 1.37k forks source link

Livewire - @this.set/Livewire.emit clearing input value using isMobile #550

Open GamendeBrian opened 1 year ago

GamendeBrian commented 1 year ago

I'm using the newest version of Livewire (2.12.3) and Air Datepicker (3.3.5).

At the moment I'm trying to set 2 global variables (date_from & date_to) in my Livewire controller.

Everything is working perfectly fine when using @this.set('date_from', date) OR Livewire.emit('updateDate', 'date_from', formattedDate) when isMobile is false.

See the code snippet here:

      {
        ...defaultOptions,
        isMobile: true,
        onSelect({date, datepicker, formattedDate}) {
          date_to_big_truck_mobile.update({
            minDate: date
          })
          if(date_to_big_truck_mobile.$el.value) {
            if(moment(date_to_big_truck_mobile.$el.value, 'DD-MM-YYYY').isBefore(date)) {
              date_to_big_truck_mobile.selectDate(date)
            }
          } else {
            date_to_big_truck_mobile.selectDate(date)
          }
          @this.set('date_from', formattedDate);
          // OR THIS
          Livewire.emit('updateDate', 'date_from', formattedDate)
        },
      }

As you can see I'm tryin to set the date_from var while isMobile: true. What happens now:

airdatepicker-is-mobile-on

The input is being cleared, but as you can see with the string that is showing up, it does set.

And when I do isMobile: false, it works perfectly fine.

airdatepicker-is-mobile-off

Is there a different way I should approach when using isMobile in combination with Livewire? Or should I expect a fix for the isMobile prop?

Thanks!

GamendeBrian commented 1 year ago

Temporary fix: I added a value attribute to the inputs and set it to echo the $date_from & $date_to variables.

Example: <input value="{{ $date_to ?? '' }}"