问题描述
我将默认日期设置为今天。
但是当用户选择了日期范围并点击了“搜索”按钮时,页面会刷新,但日期范围选择器保持默认日期。
预期结果:
如果用户选择的日期范围为 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,'Last 30 Days': [moment().subtract(29,'This Month': [moment().startOf('month'),moment().endOf('month')],'Last Month': [moment().subtract(1,'month').startOf('month'),'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 ) 或 sessionStorage ( 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)