时间戳

首页 > 解决方案 > Laravel livewire 没有获取数据（DateRangePicker）

laravel - Laravel livewire 没有获取数据（DateRangePicker）

问题描述

我正在使用 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 App\Http\Livewire\Products;

use Livewire\Component;

class Index extends Component
{
    public $date_range = '';

    public function dateTest()
    {
        dd($this->date_range);
    }
}

*** 更新 *** 我必须将日期选择器更改为这个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);
        });

    });

标签： laravellaravel-8

解决方案

您需要使用 @this.set 方法来设置 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);

推荐阅读