如何基于用户输入动态限制jQuery UI Datepicker可选星期几？

我来帮你把这个需求完整实现出来，结合你已经写的字符串构造逻辑，咱们一步步落地：

完整实现方案 #

1. HTML结构

先准备好输入星期缩写的输入框和Datepicker的目标输入框：

<label for="weekdayInput">输入允许的星期缩写（如MWF）：</label>
<input type="text" id="weekdayInput" value="MWF" placeholder="例如: MWF, TT, SuS">
<input type="text" id="datepicker">

2. JavaScript核心逻辑

首先我们需要把星期缩写对应到Date.getDay()返回的数值（0=周日，1=周一，…，6=周六），然后动态生成Datepicker的日期过滤规则：

$(function() {
  // 第一步：定义星期缩写到日期数值的映射表
  const weekdayMap = {
    'Su': 0, // 周日
    'M': 1,  // 周一
    'T': 2,  // 周二
    'W': 3,  // 周三
    'Th': 4, // 周四
    'F': 5,  // 周五
    'S': 6   // 周六
  };

  // 第二步：解析用户输入的缩写，得到允许的日期数值数组
  function parseWeekdayInput(input) {
    const allowedDays = [];
    let i = 0;
    const inputUpper = input.trim().toUpperCase(); // 统一转大写，兼容大小写输入
    
    while (i < inputUpper.length) {
      // 先检查双字符缩写（比如Th、Su）
      if (i + 1 < inputUpper.length && weekdayMap[inputUpper.substring(i, i+2)]) {
        allowedDays.push(weekdayMap[inputUpper.substring(i, i+2)]);
        i += 2;
      } 
      // 再检查单字符缩写
      else if (weekdayMap[inputUpper[i]]) {
        allowedDays.push(weekdayMap[inputUpper[i]]);
        i += 1;
      } 
      // 忽略无效字符
      else {
        i += 1;
      }
    }
    return allowedDays;
  }

  // 第三步：更新Datepicker的日期过滤规则
  function updateDatepickerFilter() {
    const inputVal = $('#weekdayInput').val();
    const allowedDays = parseWeekdayInput(inputVal);

    if (allowedDays.length === 0) {
      // 没有有效缩写时，允许选择所有日期
      $('#datepicker').datepicker('option', 'beforeShowDay', null);
      return;
    }

    // --- 这里可以用你原来的字符串构造逻辑 ---
    let conditionStr = '';
    for (let j = 0; j < allowedDays.length; j++) {
      conditionStr += `day == ${allowedDays[j]} || `;
    }
    conditionStr = conditionStr.substring(0, conditionStr.length - 3); // 去掉末尾的" || "

    // 创建beforeShowDay回调函数
    const filterFn = function(date) {
      const day = date.getDay();
      // 用eval执行构造好的条件字符串
      const isAllowed = eval(conditionStr);
      return [isAllowed, '']; // 第一个参数控制是否允许选择，第二个是可选的CSS类
    };

    // --- 如果你不想用eval（更安全），可以换成下面的写法 ---
    // const filterFn = function(date) {
    //   const day = date.getDay();
    //   const isAllowed = allowedDays.includes(day);
    //   return [isAllowed, ''];
    // };

    // 更新Datepicker的选项
    $('#datepicker').datepicker('option', 'beforeShowDay', filterFn);
  }

  // 第四步：初始化Datepicker并绑定输入事件
  $('#datepicker').datepicker();
  // 页面加载时先执行一次过滤
  updateDatepickerFilter();
  // 当用户修改缩写输入框时，实时更新过滤规则
  $('#weekdayInput').on('input change', updateDatepickerFilter);
});

关键说明 #

• 兼容多种输入：支持单字符（如MWF）和双字符（如SuTh）的星期缩写，还能自动忽略无效字符，同时兼容大小写输入。
• 两种过滤逻辑：保留了你原来的字符串构造+eval的方式，同时提供了更安全的includes方法替代方案（推荐使用后者，避免eval的安全风险）。
• 动态更新：用户输入缩写后，Datepicker会立即更新可选择的日期，无需刷新页面。

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