JQuery UI Datepicker点击已选中日期无法关闭问题求助

我之前碰到过一模一样的坑，咱们来一步步拆解问题并解决它。

问题根源 #

你的代码里，关闭Datepicker的逻辑主要依赖$scope.$watch('ngModel')——当点击新日期时，ngModel的值更新，触发picker.hide()；但点击已选中的日期时，ngModel没有发生变化，所以这个$watch不会执行，picker自然就关不掉了。

解决方案 #

这里提供两种靠谱的解决思路，你可以根据自己的代码结构选择：

方案一：通过事件委托监听日期单元格点击

直接给picker容器添加事件委托，不管点击的是已选中还是未选中的日期单元格，都强制隐藏picker。修改你现有picker.on('click')的代码：

picker.on('click', function (e) {
  e.stopPropagation();
  // 检测点击的元素是否是日期单元格（jQuery UI默认的日历单元格在.ui-datepicker-calendar下）
  const dateCell = $(e.target).closest('.ui-datepicker-calendar td');
  if (dateCell.length) {
    // 直接隐藏picker
    picker.hide();
    // 可选：如果需要强制更新ngModel（比如日期格式特殊时）
    const selectedDateText = dateCell.find('.ui-state-active').text();
    if (selectedDateText) {
      $scope.$apply(function() {
        // 这里根据你的实际日期格式转换，比如转成Date对象或特定字符串
        $scope.ngModel = selectedDateText;
      });
    }
  }
});

方案二：利用jQuery UI Datepicker官方回调（更推荐）

如果你是通过jQuery UI的datepicker()方法初始化的组件，直接在初始化时添加onSelect回调——这个回调会在任何日期被点击时触发，包括已选中的日期：

// 把这段代码加到你的link函数里（替换或补充原有的picker初始化逻辑）
picker.datepicker({
  onSelect: function(dateText, inst) {
    // 立即隐藏picker
    $(this).hide();
    // 更新ngModel，确保数据同步（即使日期和当前一致）
    $scope.$apply(function() {
      $scope.ngModel = dateText;
    });
    // 阻止事件冒泡，避免触发body上的隐藏逻辑冲突
    inst.dpDiv.click(function(e) {
      e.stopPropagation();
    });
  }
});

为什么你之前的尝试没生效？ #

你提到尝试检测选中元素的类但没生效，大概率是因为日期单元格是动态生成的——直接绑定静态元素的事件不会生效，必须用事件委托（就像方案一那样，把事件绑定到父容器picker上，监听子元素的点击）。

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