daterangepicker日期范围选择器仅Ctrl+F5强刷生效，普通F5刷新失效问题

• 核心是脚本加载时机与DOM渲染时机不匹配：普通刷新时moment和daterangepicker脚本走本地缓存，加载速度极快，执行初始化代码时#reportrange元素还未被渲染到页面上，jQuery无法选中对应元素，导致组件初始化失败。强制刷新时脚本需要从CDN重新拉取，加载耗时更长，执行初始化逻辑时DOM已经渲染完成，所以可以正常运行。
• 另一常见原因是未引入daterangepicker的配套样式文件，会直接导致组件渲染后样式错乱。

1. 首先引入daterangepicker配套CSS，你可以直接在daterangepicker.blade.php的头部添加以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.css">

2. 调整初始化逻辑，增加DOM存在性判断，确保元素存在后再执行初始化，修改后的app.js代码如下：

Vue.loadScript("https://cdn.jsdelivr.net/momentjs/latest/moment.min.js")
    .then(() => {
        console.log('456');
        return Vue.loadScript("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js")
    })
    .then(() => {
        console.log('789');
        const initDatePicker = () => {
            const $range = $('#reportrange');
            // 判断元素存在且未初始化过daterangepicker再执行
            if ($range.length && !$range.data('daterangepicker')) {
                var start = moment().subtract(29, 'days');
                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')]
                    }
                }, cb);
            
                cb(start, end);
            }
        };
        // 通用场景下等待页面完全加载后执行初始化
        if (document.readyState === 'complete') {
            initDatePicker();
        } else {
            $(window).on('load', initDatePicker);
        }
    })
    .catch(() => {
        // 脚本加载失败处理逻辑
    });

3. 如果上述方案仍不生效，可将初始化逻辑迁移到对应Vue组件的mounted生命周期钩子中，从根源保证DOM已经渲染完成后再执行组件初始化。

内容的提问来源于stack exchange，提问作者Denusklo