Laravel livewire not getting data (DateRangePicker) - laravel

Question

I'm using laravel and livewire and I'm trying to pass over the date range's date to my function. The issue I'm having
is that I'm getting an empty string.
I'm also using https://www.daterangepicker.com/#example1 for my daterange.
Here is my code.
My index.blade.php
<div>
<form wire:submit.prevent="dateTest">
<input type="text" wire:model="date_range" id="testDateRange"/>
<button type="submit">Submit date</button>
</form>
</div>
#push('js')
<script>
$(function() {
$('#testDateRange').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
#endpush
and this is my Index.php
<?php
namespace App\Http\Livewire\Products;
use Livewire\Component;
class Index extends Component
{
public $date_range = '';
public function dateTest()
{
dd($this->date_range);
}
}
*** UPDATE ***
I had to change the the date picker to be this one https://www.daterangepicker.com/#example4 so here is my new code
<form wire:submit.prevent="dateTest">
<input type="text" id="startDateTest" onchange="this.dispatchEvent(new InputEvent('input'))" wire:model="date_range" class="form-input block w-full sm:text-sm sm:leading-5">
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%" wire:model="startDate">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
<button type="submit">Submit date</button>
</form>
<script type="text/javascript">
$(function() {
var start = moment();
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, function(start, end){
$('#startDateTest').val(start.format('YYYY-MM-DD'));
cb(start, end);
});
});

Answer 1

you need to use #this.set method to set livewire variable.
this is an example for dateTimePicker i hope you will understand how to implement it in dateRangePicker.
<div class="col-lg-6">
<input wire:model.lazy="startDate" type="text" id="startTime" class="form-control" name="startDate" readonly>
</div>
<script>
$('#startTime').datetimepicker({
format: 'd-m-Y H:i',
step: 5,
minDate:0,
onChangeDateTime: function (dp,$input) {
#this.set('startDate', $input.val());
},
});
$('#endTime').datetimepicker({
format: 'd-m-Y H:i',
step: 5,
onChangeDateTime: function (dp,$input) {
#this.set('endDate', $input.val());
},
});
</script>
in livewire component class get variables like :
$finalEndDate = Carbon::createFromFormat('d-m-Y H:i',$this->endDate);
$finalStartDate = Carbon::createFromFormat('d-m-Y H:i',$this->startDate);