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

Question

$("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 的错误吗？

Code:

$("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
});

Answer 1

因为你添加了 maxDate: moment() 这意味着，今天之后的所有日期都不算在内，这意味着:

• 当您选择“今年”时，您将得到从 1 月 1 日到今天。
• 当您选择“Year to Date”时，您将得到从 1 月 1 日到今天。

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

解决方案:

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