我正在使用 daterangepicker 选择日期范围。虽然一切正常,但呈现选择日期的日历 ui 不会以正确的顺序显示日期。
7 月 1 日从星期六开始,但在日历中这是错误的,其余日期都奇怪地向下移动。
下面是我的日期范围选择器设置。
编辑根据评论添加了js/css
$(function() {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange input').html(start + ' - ' + end);
}
$('#reportrange').daterangepicker({
locale: {
"format": "DD/MM/YYYY",
},
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);
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" id="reportrange" value="01/01/2018 - 01/15/2018" />
下面是我的项目中包含的文件的顺序。
<script src="~/js/jquery-3.6.0.js"></script>
<script src="~/js/1.13.1-jquery-ui.js"></script>
<script src="~/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="~/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="~/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<!-- Page level custom scripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="~/js/Common.js"></script>
<script src="~/js/alertify.min.js"></script>
附加 dateRangePicker 的 HTML 元素
<div class="row">
<div class="col-sm-10 mt-2">
<div class="input-group ml-4 mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
<input class="form-control col-md-3" id="reportrange" placeholder="Updated On" />
</div>
</div>
</div>
我认为这是将 css 文件放置在 JS 脚本标记之后的问题。请尝试将下面的 css 文件链接移动到 head 标签并放置在所有脚本标签的顶部。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
我已经测试了你的代码片段。效果很好。请使用检查元素检查扭曲的部分 css。我认为其他一些 css 与日期范围的 css 重叠。 如果您看到发生重叠,请下载日期范围 css 并包含您自己目录中的 css 文件,并在忽略的 CSS 中使用 !important。希望这个想法对你有帮助。