jQuery UI Datepicker多选功能问题：选日期需自动选中后续2个工作日

嘿，我发现你代码没生效的核心原因：你用的datePicker()（注意大写的P）和createButton、numSelectable这些配置项，并不是原生jQuery UI Datepicker的自带API——原生组件根本不认这些参数，自然不会起作用啦。

下面我基于原生jQuery UI Datepicker，给你实现想要的功能：选中一个日期后，自动选中该日期之后的两个工作日（跳过周六周日），总共选中3个工作日。

实现思路 #

1. 手动实现多选支持：原生Datepicker没有直接的多选属性，我们靠维护选中日期数组+自定义高亮样式来搞定。
2. 选中日期后自动计算后续工作日：在onSelect事件里，写逻辑算出选中日期之后的两个工作日，把这三个日期都加入选中列表。
3. 自定义日期渲染：用beforeShowDay方法给选中的日期加上高亮样式，让用户能直观看到选中状态。

完整代码示例 #

<!-- 先引入必要的依赖 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<input type="text" class="date-pick">

<script>
$(function() {
  // 用来存选中的日期
  let selectedDates = [];

  // 判断是不是工作日（排除周六周日）
  function isWorkday(date) {
    const day = date.getDay();
    // 0是周日，6是周六，返回true就是工作日
    return day !== 0 && day !== 6;
  }

  // 从指定日期往后找第N个工作日
  function getNextWorkday(startDate, n) {
    let currentDate = new Date(startDate);
    let count = 0;
    while (count < n) {
      currentDate.setDate(currentDate.getDate() + 1);
      if (isWorkday(currentDate)) {
        count++;
      }
    }
    return currentDate;
  }

  $('.date-pick').datepicker({
    dateFormat: 'yy-mm-dd', // 统一用这个格式存日期
    beforeShowDay: function(date) {
      // 把日期转成字符串，方便和数组里的项对比
      const dateStr = $.datepicker.formatDate('yy-mm-dd', date);
      // 如果在选中数组里，就加高亮类
      const isSelected = selectedDates.includes(dateStr);
      return [true, isSelected ? 'ui-state-highlight' : '', ''];
    },
    onSelect: function(selectedDate) {
      // 先清空之前的选中记录
      selectedDates = [];
      const startDate = $.datepicker.parseDate('yy-mm-dd', selectedDate);
      
      // 把用户选的日期加进去
      selectedDates.push(selectedDate);
      
      // 加第一个后续工作日
      const next1 = getNextWorkday(startDate, 1);
      selectedDates.push($.datepicker.formatDate('yy-mm-dd', next1));
      
      // 加第二个后续工作日
      const next2 = getNextWorkday(startDate, 2);
      selectedDates.push($.datepicker.formatDate('yy-mm-dd', next2));
      
      // 刷新日历，让高亮生效
      $(this).datepicker('refresh');
      
      // 可选：把选中的日期显示在输入框里
      $(this).val(selectedDates.join(', '));
    }
  });
});
</script>

关键点说明 #

• 工作日判断：isWorkday函数只排除了周六周日，如果需要支持节假日，你可以在这里加个节假日数组，比如const holidays = ['2024-10-01', ...]，然后判断日期是否在这个数组里。
• 高亮样式：用的是jQuery UI自带的ui-state-highlight类，如果你想自定义样式，直接写CSS覆盖这个类就行。
• 多选逻辑：我们靠selectedDates数组维护选中的日期，每次用户选新日期都会清空之前的记录，确保始终只保留当前选中的3个工作日。

如果你之前用的是其他第三方日期插件（比如不是jQuery UI的那个），可以告诉我具体插件名，我再给你适配方案～

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