Laravel livewire没有得到数据(DateRangePicker)

Question

我正在使用laravel和livewire，我试图将日期范围的日期传递给我的函数。我遇到的问题我得到的是一个空字符串

我也使用https://www.daterangepicker.com/#example1作为我的数据范围。

这是我的代码。

我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

这是index。php

<?php
namespace AppHttpLivewireProducts;
use LivewireComponent;
class Index extends Component
{
public $date_range = '';
public function dateTest()
{
dd($this->date_range);
}
}

*** UPDATE ***我需要把日期选择器改成这个https://www.daterangepicker.com/#example4这是我的新代码

<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>&nbsp;
<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

你需要使用@this。设置livewire变量的方法。

这是一个dateTimePicker的例子，希望你能理解如何在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>

在livewire组件类中获取如下变量:

$finalEndDate = Carbon::createFromFormat('d-m-Y H:i',$this->endDate);
$finalStartDate = Carbon::createFromFormat('d-m-Y H:i',$this->startDate);