Skip to main content

Black Friday 2025! Only until December 1st: coupon FRIDAY25 for 40% off Yearly/Lifetime membership!

Read more here

Stubs: Customizing Default Component Files

Lesson 02/21 2:02
Autoplay

Comments & Discussion

US
Umair Shah ✓ Link copied!

Hello sir i am trying to use datapicker (https://www.daterangepicker.com/) but its not working wih livewire. when i add (wire:model.defer="custom_date") this code it makes my input empty blank and also when i use checkbox as checked its also not working

PK
Povilas Korop ✓ Link copied!

Livewire by definition doesn't play well with any JavaScript libraries, because they are in conflict for rewriting the same code on the page. So if you use Livewire, I would encourage to NOT use any JS/jQuery libraries together.

There's a section later in the course about Select2 and CKEditor examples, so you can make them work, but it's pretty hard.

YR
Yeasin Rahman Siam ✓ Link copied!

Povilas sir was right.. livewire doesn't play well with other JS lib.. but you can achieve your purpose by dispatching livewire events,...
you have to set livewire properties value from external js lib callback you can code something like in your livewire component

<script>
$(function() {
$('input[name="dates"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
 
@this.set('dates', start.format('YYYY-MM-DD')); // setting direct to property value
//or
@this.setDate( start.format('YYYY-MM-DD') ); // calling action
 
livewire.emit('date-changed', start.format('YYYY-MM-DD')); // emitting event
 
});
});
</script>

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.