如何关闭绑定到div的jQuery Datepicker？选日期后无法关闭

我之前也碰到过这种情况——把jQuery UI Datepicker绑定到div而非input元素时，默认的自动关闭逻辑就“罢工”了，毕竟它原本的设计是围绕输入框来的。结合你的问题，这里给你几个靠谱的解决方案：

1. 选择日期后自动关闭 #

核心思路是利用onSelect事件，在用户选完日期后手动调用datepicker的官方hide()方法，同时把日期值同步到你的input字段里：

// 假设你的div ID是datePickerContainer，input ID是targetInput
$("#datePickerContainer").datepicker({
  onSelect: function(selectedDate, datepickerInstance) {
    // 将选中的日期同步到input
    $("#targetInput").val(selectedDate);
    // 手动关闭datepicker，this指向绑定的div元素
    $(this).datepicker("hide");
  },
  showButtonPanel: true // 保留你需要的按钮面板
});

这里一定要用datepicker("hide")而不是普通的$(this).hide()，因为前者会更新datepicker的内部状态，避免后续无法再次打开的问题。

2. 修复按钮面板的关闭按钮失效问题 #

如果开启了showButtonPanel但关闭按钮点击没反应，大概率是事件绑定的问题。可以在beforeShow事件里手动给关闭按钮绑定点击逻辑：

$("#datePickerContainer").datepicker({
  onSelect: function(selectedDate, datepickerInstance) {
    $("#targetInput").val(selectedDate);
    $(this).datepicker("hide");
  },
  showButtonPanel: true,
  beforeShow: function(input, inst) {
    // 先移除旧的点击事件，再绑定新的，避免重复触发
    $(".ui-datepicker-close").off("click").on("click", function() {
      $("#datePickerContainer").datepicker("hide");
    });
  }
});

另外也可以检查一下页面的CSS，看看是不是关闭按钮被其他元素遮挡（比如z-index过低），导致点击不到。

3. 点击页面其他区域关闭datepicker（可选优化） #

为了提升用户体验，你可以添加全局点击事件，当用户点击datepicker和绑定div之外的区域时自动关闭：

$(document).on("click", function(e) {
  const $target = $(e.target);
  // 判断点击目标是否在datepicker或绑定div内部
  if (!$target.closest("#datePickerContainer").length && !$target.closest(".ui-datepicker").length) {
    $("#datePickerContainer").datepicker("hide");
  }
});

这些方法应该能解决你遇到的问题，核心就是始终使用datepicker提供的hide()方法来管理它的显示状态，而不是直接操作DOM的显示隐藏。

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