I have a date picker inside a Livewire ponent which I'm setting the value of via JavaScript as the Bootstrap datepicker does not update the value automatically:

$('.datepicker').datetimepicker({
        format: 'DD/MM/YYYY',
        icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-screenshot',
            clear: 'fa fa-trash',
            close: 'fa fa-remove'
        }
    }).on('dp.change', function (e) {
        this.due_date = e.target.value;
    });

This works great, however the picker disappears when the Livewire update occurs (as expected). Is there a way to update due_date via JavaScript but have it deferred in the same way as setting wire:model.defer="due_date" so it's sent on the next network update rather than instantly?

I have a date picker inside a Livewire ponent which I'm setting the value of via JavaScript as the Bootstrap datepicker does not update the value automatically:

$('.datepicker').datetimepicker({
        format: 'DD/MM/YYYY',
        icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-screenshot',
            clear: 'fa fa-trash',
            close: 'fa fa-remove'
        }
    }).on('dp.change', function (e) {
        this.due_date = e.target.value;
    });

This works great, however the picker disappears when the Livewire update occurs (as expected). Is there a way to update due_date via JavaScript but have it deferred in the same way as setting wire:model.defer="due_date" so it's sent on the next network update rather than instantly?

• javascript
• laravel
• laravel-livewire
• alpine.js

Share Improve this question Follow edited Dec 10, 2021 at 18:49 valiano 18.7k77 gold badges7171 silver badges8383 bronze badges asked Dec 9, 2021 at 12:31 DanCDanC 4311 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Use:

@this.set('prop', value, true)

The third argument of true is for defer.