时间戳

首页 > 解决方案 > DateRangePicker - 所选日期范围未正确突出显示

javascript - DateRangePicker - 所选日期范围未正确突出显示

问题描述

$("input[name='MyDaterange']").daterangepicker({
  ranges: {
    'This Week': [moment().day("Sunday"), moment().day("Saturday")],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'This Year': [moment().startOf('year'), moment().endOf('year')],
    'Year to Date': [moment().startOf('year'), moment()]
  },
  maxDate: moment() // this is required
});
<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" name="MyDaterange" id="MyDaterange" value="" />

我正在使用 daterangepicker 来选择预定义的日期。当我选择Year To Date时，另一个选项This Year会突出显示。

  1. 如何仅使单击的范围处于活动状态。
  2. 这是 daterangepicker 的错误吗？

代码：

$("input[name='MyDaterange']").daterangepicker({
  ranges: {
    'This Week': [moment().day("Sunday"), moment().day("Saturday")],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'This Year': [moment().startOf('year'), moment().endOf('year')],
    'Year to Date': [moment().startOf('year'), moment()]
  },
  maxDate: moment() // this is required
});

标签： javascriptjquerycssdaterangepicker

解决方案

由于您添加了maxDate: moment()它的意思，今天之后的所有日期都不计算在内，这意味着：

  • 当您选择“今年”时，您将获得从 1 月 1 日到今天。
  • 当您选择“年初至今”时，您将获得从 1 月 1 日到今天。

它们是相同的，并且由于插件检查开始和结束日期以检查激活范围，“今年”总是第一个激活。

解决方案：

  • 删除“今年”，因为您今天使用 maxDate =，它并不是很有用

推荐阅读