daterangepicker.js 在连线后未加载：navigate

Question

我在我的网络应用程序中使用这个数据范围选择器： 数据范围选择器

当我添加电线：导航到导航链接时，我在控制台中收到错误，显然数据选择器未加载：

Uncaught TypeError: $(...).daterangepicker is not a function
at <anonymous>:2:49
at swapCurrentPageWithNewHtml (livewire.js?id=951e6947:7730:19)
at livewire.js?id=951e6947:7910:11
at preventAlpineFromPickingUpDomChanges (livewire.js?id=951e6947:7987:5)
at livewire.js?id=951e6947:7900:9
at prefetches.<computed>.whenFinished (livewire.js?id=951e6947:7462:9)
at storeThePrefetchedHtmlForWhenALinkIsClicked (livewire.js?id=951e6947:7446:11)
at livewire.js?id=951e6947:7878:11
at livewire.js?id=951e6947:7438:7
at livewire.js?id=951e6947:7425:7

我的代码：

 <script>
    $('input[name="dtmDispatchDateRange"]').daterangepicker({
        locale:{
            format: 'MM/DD/YYYY'
        }
    });
    var date1 = document.getElementById("date1")
    var date2 = document.getElementById("date2")
    var contentToChange = document.getElementById("dates")
    contentToChange.value = date1.textContent + " - " + date2.textContent
</script>

无线：导航 点击

有线：导航 点击

头部布局：

  <script type="text/javascript" src="{{ asset('assets-bs5/datapicker/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets-bs5/datapicker/daterangepicker.min.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('assets-bs5/datapicker/daterangepicker.css') }}" />

请帮忙

编辑 2025 年 1 月 3 日： 相关表格：

    @extends('layouts.app')
    @section('content')

    @php $title = 'Manifest' @endphp
    @include('layouts.components.page_title_content_section')
    @include('layouts.components.page_error_section')

    <div style="display: none">
        <div id="date1">{{ isset($dtmDispatchDate1) ? (\Carbon\Carbon::parse($dtmDispatchDate1)->format('m/d/Y')) : '' }}</div>
        <div id="date2">{{ isset($dtmDispatchDate2) ? (\Carbon\Carbon::parse($dtmDispatchDate2)->format('m/d/Y')) : '' }}</div>
    </div>

    <section data-bs-version="5.3">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="">
                    <blockquote style="border-color: #39b451; background-color: #EBECEE; height: 170px;">
                        <div id="externalGrids" class="">
                            <label for="intOrderId">Order No:</label><br>
                            <span id="intOrderId"></span>
                        </div>
                        <div id="externalGrids" class="">
                            <label for="strLoadId">Load Id:</label><br>
                            <span id="strLoadId"></span>
                        </div>
                        <div id="externalGrids" class="">
                            <label for="strDeliveryMethod">Delivery Method:</label><br>
                            <span  style="width: 50px" id="strDeliveryMethod"></span>
                        </div>
                        <div id="externalGrids" class="">
                            <label for="strDispatchDate">Dispatch Date:</label><br>
                            <span  style="width: 50px" id="strDispatchDate"></span>
                        </div>
                        <form method="get" action="">
                            <div id="externalGrids" class="" >
                                <label for="">Dispatch Date</label><br>
                                <input style="width: 200px"  id="dates" name="dtmDispatchDateRange" type="text" autocomplete="off" >
                            </div>
                            <div id="externalGrids" class="">
                                <label for="">Show</label><br>
                                <button style="background-color: #36b551; color: whitesmoke; width: 90px;">OK</button>
                            </div>
                        </form>
                    </blockquote>
                </div>
            </div>
        </div>
    </section>
    <section >
        <div class="container-fluid" style="">
            <table class="table table-bordered" >
                <thead>
                    <tr id="table_header">
                        <th class="text-nowrap">Order No</th>
                        <th class="text-nowrap">Load ID</th>
                        <th class="text-nowrap">Delivery Method</th>
                        <th class="text-nowrap">Dispatch Date</th>
                        <th class="text-center">Order Qty</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Status</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($orders as $item)
                    <tr id="">
                        <td>..........</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>

    <script>
        $('input[name="dtmDispatchDateRange"]').daterangepicker({
            locale:{
                format: 'MM/DD/YYYY'
            }
        });
        var date1 = document.getElementById("date1")
        var date2 = document.getElementById("date2")
        var contentToChange = document.getElementById("dates")
        contentToChange.value = date1.textContent + " - " + date2.textContent
    </script>
@stop

Answer 1

您还应该发布视图的相关部分。

但是，我会尝试根据提供的信息给出解决方案。

wire:navigate 会导致文档的 body 更新而不重新加载页面，因此外部库设置的任何引用都会丢失。

在 wire:navigate 事件上添加事件侦听器以重新初始化 daterangepicker 应该可以解决问题：

document.addEventListener('livewire:navigated', () => {

    $('input[name="dtmDispatchDateRange"]').daterangepicker({
        locale:{
            format: 'MM/DD/YYYY'
        }
    });

    .....
});

如果这不起作用，请出示查看代码以帮助我们更好地了解您的情况