使用MomentJS判断日历选中日期区间是否超过7天的实现方案

原代码问题 #

• moment(fromDate, toDate)用法错误，moment构造函数第二个参数为日期解析格式，不能传入结束日期，无法直接计算两个日期间隔
• 直接格式化字符串后做大小比较的逻辑不符合「判断区间是否超过7天」的需求

正确实现逻辑 #

通过moment提供的diff方法计算两个日期的天数差，根据差值判断是否需要禁用按钮，同时要先判断起止日期都已选择，避免空值报错。

修正后代码 #

{
  // 起止日期都存在且间隔≥7天时禁用按钮
  fromDate && toDate && moment(toDate).diff(moment(fromDate), 'days') >= 7 ? (
    <li className="nav-item disabled">
      <a className="nav-link disabled">Hourly</a>
    </li>
  ) : (
    <li className="nav-item">
      <a
        className={`nav-link${
          selectedOption === "hourly" ? " active" : ""
        }`}
        onClick={() => updatedSwitchData("hourly")}
      >
        Hourly
      </a>
    </li>
  )
}

补充说明 #

• 如果需求是包含首尾日期的7天区间，把判断条件调整为> 6即可
• 计算时如果需要忽略时间部分只看日期差值，可以在调用diff前先对两个日期调用startOf('day')方法，避免同一天不同时间导致的差值计算误差。

内容的提问来源于stack exchange，提问作者Gurupal singh