jQuery Datepicker特定日期宽度样式设置及多元素添加需求

没问题，我这就帮你把硬编码的jQuery Datepicker改成动态实现，既能给特定日期加上类似能量条的宽度效果，还能在这些日期里添加多个元素。一步步来：

1. 把特殊日期改成动态可配置的数据结构 #

先把原来硬编码的日期判断抽成一个数组，以后要加、改特殊日期直接修改数组就行，不用动逻辑代码：

// 动态维护的特殊日期列表，每个对象包含日期、宽度占比、提示文本
const specialDates = [
  { month: 4, day: 12, widthPercent: 20, tooltip: "special \n tooltip \n here" },
  { month: 4, day: 10, widthPercent: 40, tooltip: "special \n tooltip example" },
  // 随时可以新增更多日期配置
];

然后修改specialDate函数，用数组匹配代替硬编码判断：

function specialDate(date) {
  // 从动态数组里匹配当前日期
  const matchedDate = specialDates.find(item => 
    date.getMonth() === item.month && date.getDate() === item.day
  );
  
  if (matchedDate) {
    // 返回允许选中、自定义类名、提示文本
    return [true, 'sd', matchedDate.tooltip];
  }
  // 默认返回：允许选中、无特殊类、无提示
  return [true, '', ''];
}

2. 实现动态宽度的“能量条”效果 #

我们用绝对定位在日期单元格底部做能量条，通过动态行内样式设置宽度，比硬编码类名更灵活：

/* 给日期单元格加相对定位，方便内部元素定位 */
.ui-datepicker-calendar td {
  position: relative;
  padding: 8px;
}

/* 能量条基础样式 */
.special-day-bar {
  position: absolute;
  bottom: 2px;
  left: 2px;
  height: 3px;
  background-color: #3498db;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* 特殊日期的背景高亮 */
.sd {
  background-color: rgba(52, 152, 219, 0.1);
}

3. 在特殊日期内添加多个元素 #

jQuery Datepicker的beforeShowDay只能返回类名和提示，要添加元素得在日历渲染后，通过DOM操作插入。我们用beforeShow和onChangeMonthYear事件确保切换月份或显示日历的时候元素都能正确渲染：

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: specialDate,
    // 切换月份时重新渲染元素
    onChangeMonthYear: function(year, month, inst) {
      addSpecialElements();
    },
    // 日历显示前渲染元素（加个小延迟确保DOM已生成）
    beforeShow: function(input, inst) {
      setTimeout(addSpecialElements, 10);
    }
  });

  // 页面初始化时先渲染一次
  addSpecialElements();
});

function addSpecialElements() {
  // 先清空旧元素，避免重复添加
  $(".special-day-bar, .special-day-label").remove();
  
  // 获取当前日历显示的年月
  const currentDate = $("#datepicker").datepicker("getDate") || new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();

  // 遍历所有特殊日期，匹配当前显示的月份
  specialDates.forEach(item => {
    if (currentMonth === item.month) {
      // 精准定位到对应的日期单元格
      const dayCell = $(`.ui-datepicker-calendar td[data-handler='selectDay'][data-month='${item.month}'][data-year='${currentYear}']`).filter(function() {
        // 避免日期数字混淆（比如1和11），匹配精确文本
        return $(this).text().trim() === String(item.day);
      });
      
      if (dayCell.length) {
        // 添加能量条
        dayCell.append(`<div class="special-day-bar" style="width: ${item.widthPercent}%"></div>`);
        // 添加额外元素（比如百分比标签）
        dayCell.append(`<span class="special-day-label" style="font-size:10px; color:#e74c3c; position:absolute; top:2px; right:2px;">${item.widthPercent}%</span>`);
      }
    }
  });
}

完整可运行示例 #

把所有代码整合起来，直接就能用：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    .ui-datepicker-calendar td {
      position: relative;
      padding: 8px;
    }
    .special-day-bar {
      position: absolute;
      bottom: 2px;
      left: 2px;
      height: 3px;
      background-color: #3498db;
      border-radius: 2px;
      transition: width 0.3s ease;
    }
    .sd {
      background-color: rgba(52, 152, 219, 0.1);
    }
  </style>
</head>
<body>
  <div id="datepicker"></div>

  <script>
    const specialDates = [
      { month: 4, day: 12, widthPercent: 20, tooltip: "special \n tooltip \n here" },
      { month: 4, day: 10, widthPercent: 40, tooltip: "special \n tooltip example" },
      { month: 4, day: 18, widthPercent: 75, tooltip: "High energy day" }
    ];

    function specialDate(date) {
      const matchedDate = specialDates.find(item => 
        date.getMonth() === item.month && date.getDate() === item.day
      );
      if (matchedDate) {
        return [true, 'sd', matchedDate.tooltip];
      }
      return [true, '', ''];
    }

    $(function() {
      $("#datepicker").datepicker({
        beforeShowDay: specialDate,
        onChangeMonthYear: function(year, month, inst) {
          addSpecialElements();
        },
        beforeShow: function(input, inst) {
          setTimeout(addSpecialElements, 10);
        }
      });
      addSpecialElements();
    });

    function addSpecialElements() {
      $(".special-day-bar, .special-day-label").remove();
      
      const currentDate = $("#datepicker").datepicker("getDate") || new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = currentDate.getMonth();

      specialDates.forEach(item => {
        if (currentMonth === item.month) {
          const dayCell = $(`.ui-datepicker-calendar td[data-handler='selectDay'][data-month='${item.month}'][data-year='${currentYear}']`).filter(function() {
            return $(this).text().trim() === String(item.day);
          });
          
          if (dayCell.length) {
            dayCell.append(`<div class="special-day-bar" style="width: ${item.widthPercent}%"></div>`);
            dayCell.append(`<span class="special-day-label" style="font-size:10px; color:#e74c3c; position:absolute; top:2px; right:2px;">${item.widthPercent}%</span>`);
          }
        }
      });
    }
  </script>
</body>
</html>

这样就实现了完全动态的配置：想加新的特殊日期，只需要在specialDates数组里加一行配置；想调整能量条样式，直接改CSS就行，不用动逻辑代码。

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