Retain (Preserve) Selected date of jQuery DateRangePicker after Button Clicked

Question

I have a daterangepicker and a 'search' button,

I set the default date as today.

But when the user has chosen the date range, and the 'search' button is clicked, the page refresh but the daterangepicker remain the default date.

Expectation outcome:

If the user chose the daterange of 17 March 2021 - 20 March 2021, the daterangepicker should show 17 March 2021 - 20 March 2021 instead of the default date, 17 March 2021 - 17 March 2021.

My daterangepicker code:

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

My 'search' button:

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

Please help on this, thanks in advance.

Answer 1

You can use localStorage ( https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage ) or sessionStorage ( https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage ) to keep your string in memory by detecting change. In your case sessionStorage would probably be better.

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

And after that you just need to update the value when you load the page

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

I use JQuery but you can do it with simple Javascript.

Another solution would be to never reload page and just to update the container you use to display datas. ( using Ajax for example )