daterangepicker日历渲染异常:日期显示顺序错乱问题求助
daterangepicker日历UI日期显示位置偏移问题
我正在使用daterangepicker组件选择日期范围,功能运行正常,但日历UI的日期顺序显示不正确。7月1日实际为周六,但在日历中显示位置错误,其余日期也存在奇怪的偏移。
补充信息
1. daterangepicker配置代码
$(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); });
2. 基础依赖引入示例代码
<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" />
3. 项目实际文件引入顺序
<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/select2@4.1.0-rc.0/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>
4. 绑定组件的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>
内容的提问来源于stack exchange,提问作者AJ__
相关产品推荐
相关产品推荐

