dayjs isBefore类型异常及时间判断样式切换功能失效求助

1. dayjs isBefore 显示类型为 any 的问题 #

• 若使用TypeScript环境，需安装dayjs的类型定义包：

  npm install @types/dayjs --save-dev
  

• 若为纯JavaScript环境，编辑器的橙色提示仅为缺少类型声明，不影响代码运行，可通过添加注释手动指定变量类型消除提示：

  /** @type {import('dayjs').Dayjs} */
  var currentTime = dayjs();
  /** @type {import('dayjs').Dayjs} */
  var tenStartTime = dayjs("9:59 AM", 'h:mm A');
  /** @type {import('dayjs').Dayjs} */
  var tenEndTime = dayjs("11:00 AM", 'h:mm A');
  

2. 时间判断功能不生效的核心原因与修复 #

问题根源 #

classTimeAdjustment函数仅在页面初始化时执行一次，后续时间变化后不会重新判断更新样式；此外需确保dayjs已正确引入到项目中。

修复步骤 #

• 添加定时更新逻辑：在初始调用后，设置定时器每隔1分钟重新执行判断函数，保证样式随时间动态更新：

  $(document).ready(function() {
      updateCurrentTime();
  
      function classTimeAdjustment() {
          var currentTime = dayjs();
          var tenStartTime = dayjs("9:59 AM", 'h:mm A');
          var tenEndTime = dayjs("11:00 AM", 'h:mm A');
  
          var $hour10 = $('#hour-10'); // 缓存DOM元素，提升性能
          if (currentTime.isAfter(tenEndTime)) {
              $hour10.removeClass("present future").addClass("past");
          } else if (currentTime.isBefore(tenStartTime)) {
              $hour10.removeClass("present past").addClass("future");
          } else {
              $hour10.removeClass("future past").addClass("present");
          }
      }
  
      classTimeAdjustment(); // 初始调用
      // 每分钟更新一次
      setInterval(classTimeAdjustment, 60000);
  });
  

• 简化DOM操作：缓存jQuery对象并链式调用类操作方法，减少重复DOM查询，同时避免遗漏移除类名。

3. 无法使用isBetween插件的解决方法 #

dayjs的isBetween属于扩展插件，需单独引入并启用：

• CDN环境：在引入dayjs核心脚本后添加插件脚本：

  <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/isBetween.js"></script>
  <script>
      dayjs.extend(dayjs_plugin_isBetween); // 启用插件
  </script>
  

• 模块化环境：

  import dayjs from 'dayjs';
  import isBetween from 'dayjs/plugin/isBetween';
  
  dayjs.extend(isBetween); // 启用插件
  

启用后可简化判断逻辑：

if (currentTime.isAfter(tenEndTime)) {
    $hour10.removeClass("present future").addClass("past");
} else if (currentTime.isBetween(tenStartTime, tenEndTime)) {
    $hour10.removeClass("future past").addClass("present");
} else {
    $hour10.removeClass("present past").addClass("future");
}

内容的提问来源于stack exchange，提问作者Sam williams