Блог

У меня есть указатель даты и кнопка «поиск»,

Я установил дату по умолчанию как сегодня.

Но когда пользователь выбрал диапазон дат и нажал кнопку «поиск», страница обновляется, но указатель даты остается датой по умолчанию.

Ожидаемый результат:

Если пользователь выбрал диапазон дат с 17 марта 2021 года по 20 марта 2021 года, в окне выбора даты должно отображаться 17 марта 2021 года — 20 марта 2021 года вместо даты по умолчанию, 17 марта 2021 года — 17 марта 2021 года.

Мой код для выбора даты:

                                                         <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"/>
 

Пожалуйста, помогите в этом, заранее спасибо.

Вы можете использовать localStorage ( https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage ) или хранилище сеансов ( https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage ) чтобы сохранить вашу строку в памяти, обнаружив изменение. В вашем случае sessionStorage, вероятно, было бы лучше.

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

И после этого вам просто нужно обновить значение при загрузке страницы

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

Я использую jQuery, но вы можете сделать это с помощью простого Javascript.

Другим решением было бы никогда не перезагружать страницу и просто обновлять контейнер, который вы используете для отображения данных. ( например, с помощью Ajax )