單擊按鈕后保留（保留）jQuery DateRangePicker 的選定日期

Question

我有一個 daterangepicker 和一個“搜索”按鈕，

我將默認日期設置為今天。

但是，當用戶選擇了日期范圍並單擊“搜索”按鈕時，頁面會刷新，但 daterangepicker 仍然是默認日期。

預期結果：

如果用戶選擇 2021 年 3 月 17 日 - 2021 年 3 月 20 日的日期范圍，則日期范圍選擇器應顯示 2021 年 3 月 17 日 - 2021 年 3 月 20 日，而不是默認日期 2021 年 3 月 17 日 - 2021 年 3 月 17 日。

我的日期范圍選擇器代碼：

                                                        <script type="text/javascript">
                                                    $(document).ready(function() {
                                                        
                                                        var start = moment();
                                                        var end = moment();

                                                $('#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);

                                                function cb(start, end) {
                                                    $('#reportrange span').html(start.format('DD MMMM YYYY') + ' - ' + end.format('DD MMMM YYYY'));
                                                    $('#to').val(start.format('YYYY-MM-DD'));
                                                    $('#from').val(end.format('YYYY-MM-DD'));       
                                                }

                                                cb(start, end);
                                            
                                                
                                            });
                                             </script>

我的“搜索”按鈕：

<input class="btn btn-info btn-block" type="submit" name="btnTotal" id="btnTotal" value="Search Total"/>

請對此提供幫助，在此先感謝。

Answer 1

您可以使用 localStorage ( https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage ) 或 sessionStorage ( https://developer.mozilla.org/fr/docs/Web/API/Window/ sessionStorage ）通過檢測更改將您的字符串保存在 memory 中。 在你的情況下 sessionStorage 可能會更好。

$('#reportrange').change(function(){
    sessionStorage.setItem('dateRange', $(this).val());
});

之后，您只需要在加載頁面時更新值

$(function(){
   if(sessionStorage.getItem('dateRange') != null){
       $('#reportrange').val(sessionStorage.getItem('dateRange'));
   }
});

我使用 JQuery 但您可以使用簡單的 Javascript 來完成。

另一種解決方案是永遠不要重新加載頁面，而只是更新用於顯示數據的容器。 （以 Ajax 為例）