Datepicker技术问题：点击按钮无法关闭已打开的日历弹窗

阿华AIGC实验室

2026-5-28

解决Datepicker按钮点击无法关闭弹窗的问题

我懂你遇到的这个困扰了——点击按钮能打开Datepicker日历弹窗，点外部可以正常关闭，但再次点击按钮的时候弹窗却纹丝不动。这是因为jQuery UI Datepicker的默认行为里，点击绑定了datepicker的容器元素（也就是你的#datepicker-group）并不会触发弹窗的关闭逻辑，咱们得手动给按钮加个切换处理。

修改后的代码实现

HTML部分（保持原有结构不变）

<div id="datepicker-group" class="input-group date" data-date-format="yyyy-mm-dd"> 
  <button type="button" class="btn btn-primary" id='select_dates'>Select dates</button> 
  <input class="form-control" name="data" type="hidden" placeholder="" id='test'/> 
</div>

jQuery部分（添加按钮切换弹窗的逻辑）

$(document).ready(function() {
  // 初始化Datepicker并保存实例
  const datepickerInstance = $("#datepicker-group").datepicker({
    weekStart: 1,
    multidate: true,
    clearBtn: true,
    keyboardNavigation: false,
    daysOfWeekDisabled: "0,6",
    dateFormat: 'yyyy-mm-dd'
  });

  // 给按钮绑定点击事件，实现弹窗的切换显示/隐藏
  $('#select_dates').on('click', function(e) {
    // 阻止事件冒泡，避免触发容器上的默认打开逻辑造成冲突
    e.stopPropagation();
    const datepickerWidget = datepickerInstance.datepicker('widget');
    // 根据弹窗当前状态执行对应操作
    if (datepickerWidget.is(':visible')) {
      datepickerInstance.datepicker('hide');
    } else {
      datepickerInstance.datepicker('show');
    }
  });
});