jquery DateRangePicker日历呈现错误

2ic8powd  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(114)

我使用daterangepicker来选择日期范围。虽然一切正常,但用于选择日期的日历ui没有按正确的顺序显示日期。
Here is an image for the calendar for the month of July rendered by daterangepicker.
7月1日从星期六开始,但在日历上它是错误的,其余的日期被奇怪地移下来。
下面是我的daterangepicker设置。

编辑根据评论添加了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 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>


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>

5anewei6

5anewei61#

我测试了你的片段。它工作正常。请使用检查元件检查您的扭曲截面css。我认为其他一些css与日期范围的css重叠。如果您看到重叠发生,然后下载日期范围css,并包括css文件从您自己的目录和使用!在忽略的CSS中很重要。希望这个想法对你有帮助。

ut6juiuv

ut6juiuv2#

我想CSS文件不加载在这里。这是CSS文件放置在JS脚本标记之后的问题。尝试将下面的CSS文件链接标签移动到头部部分,并放置在所有脚本标签的顶部。希望这能起作用。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

字符串

相关问题