Wire:model when setting value with JS

#1

What seems to be the problem:
I have a simple datepicker, and when a user selects a date I am setting the value of a hidden input to that date string using JS. This input has a wire:model=“date”, however the change in value doesn’t trigger a refresh of the livewire component. Is there a way to trigger a livewire refresh when a value is changed via JS rather than user typing?

Are you using the latest version of Livewire:
Yes

#2

Can you share some code? Also, you might find this section of the docs valuable: https://laravel-livewire.com/docs/third-party-libraries/

#3

One way is not to use wire:model, but rather emit the change event from JS: https://laravel-livewire.com/docs/events.

#4

Thanks @iAmKevinMcKee!

That was just what I needed. I can get rid of the hidden input all together and instead just do:

$('#datepicker').datepicker({
   dateFormat: 'dd-mm-yy',
   onSelect: function(dateText) {
       @this.set('date', dateText);
   }
});
1 Like
#5

I appreciate that you found a solution, but without seeing your form code, and not knowing exactly how this function operates (what “datepicker” is for vs. “dateText” vs “date”, it is hard to learn anything from this solution.

Can you provide your form code as well for reference?

1 Like