Pass input text live on change to component

Hello,

i am trying to send date via a filter to the component, but it is getting null value at component, So how to pass selected date as soon as value is changed via date picker?

   <input type="text" class="form-control form-control-solid form-text-sm" placeholder="Pick date" wire:model.live="selectedDate" id="date"/>

@push('scripts')
<script>
$("#date").daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    autoApply:true,
    minYear: 1901,
    format:'YY-MM-DD',
    maxYear: parseInt(moment().format("YYYY"),12)
});

$("#date").on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('YYYY-MM-DD'));
  });

</script>
@endpush

Snapey

2 years ago

Best Answer

Level 122

send an event to livewire with the value when you detect apply.daterangepicker

1 like

LaCoder

2 years ago

Level 1

@Snapey I sent with this way,

@push('scripts')
    <script>
        $("#date").daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoApply: true,
            minYear: 1901,
            format: 'YY-MM-DD',
            maxYear: parseInt(moment().format("YYYY"), 12)
        });

        $("#date").on('apply.daterangepicker', function(ev, picker) {
            const selectedDate = picker.startDate.format('YYYY-MM-DD');
            console.log(selectedDate);
            // Send Livewire event with the selected date
            Livewire.dispatch('dateApplied', selectedDate);
        });
    </script>
@endpush

and in component,

  protected $listeners = ['dateApplied' => 'updateSelectedDate'];

    public function updateSelectedDate($date)
    {
        $this->selectedDate = $date;
    }

as soon as I select the date it throws an error,

TypeError
Only arrays and Traversables can be unpacked

LaCoder

2 years ago

Level 1

Fixed it with this, https://github.com/livewire/livewire/discussions/6856

Please or to participate in this conversation.