为jQuery UI Datepicker选中日期添加aria-selected='true'的问题求助

你的需求是在多Datepicker场景下，每次选中日期后重置所有日期的aria-selected属性，再给当前选中（带.ui-state-active类）的日期添加aria-selected='true'。现有代码存在选择器语法错误和事件时机不匹配的问题，以下是修正方案：

错误点梳理 #

1. 选择器转义错误：jQuery类选择器不需要反斜杠转义，比如$("\.datepicker")应该改成$(".datepicker")，hasClass("\.ui-state-active")改成hasClass("ui-state-active")；同时a \.ui-state-default的空格+转义是无效选择器，正确写法是a.ui-state-default。
2. 事件时机问题：onSelect触发时，Datepicker的DOM可能还未完成更新，此时.ui-state-active类还未被添加到选中日期上，导致遍历无法找到目标元素。
3. 全局范围操作：原代码会操作页面所有a.ui-state-default元素，可能干扰其他Datepicker的状态。

修正后的完整代码 #

HTML部分

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https:////code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <p>Date 1: <input type="text" class="datepicker"></p>
  <p>Date 2: <input type="text" class="datepicker"></p>
</body>
</html>

JavaScript部分

$(function() {
  $(".datepicker").datepicker({
    onSelect: function(dateText, inst) {
      // 只操作当前Datepicker容器内的日期元素，避免影响其他组件
      const $calendar = $(inst.dpDiv);
      // 重置当前日历内所有日期的aria-selected属性
      $calendar.find("a.ui-state-default").removeAttr('aria-selected');
      // 找到当前选中的日期（带.ui-state-active类）并添加属性
      $calendar.find("a.ui-state-active").attr('aria-selected', 'true');
      
      console.log("Selected date:", dateText);
    },
    // 切换月份/年份时也同步重置状态
    onChangeMonthYear: function(year, month, inst) {
      const $calendar = $(inst.dpDiv);
      $calendar.find("a.ui-state-default").removeAttr('aria-selected');
      $calendar.find("a.ui-state-active").attr('aria-selected', 'true');
    }
  });
});

关键优化说明 #

• 限定操作范围：通过inst.dpDiv获取当前Datepicker的弹出容器，只对当前日历内的日期元素进行操作，避免多组件之间的状态干扰。
• 修正选择器语法：移除所有不必要的反斜杠转义，使用标准的jQuery类选择器语法。
• 补充月份切换逻辑：添加onChangeMonthYear事件，确保切换月份/年份时，选中日期的aria-selected属性也能正确同步。
• 规范ARIA属性值：使用字符串'true'而非布尔值true，符合ARIA属性的规范要求。

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