如何为jQuery UI Datepicker添加禁用日期点击提示？

要给jQuery UI Datepicker添加禁用日期点击提示，可通过监听日历中禁用日期单元格的点击事件实现，具体修改如下：

修改后的完整代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
<script type="text/javascript">
$(function() {
  // 初始化日期选择器
  $('#datepicker').datepicker({ 
    minDate: -60, 
    maxDate: 0,
    // 月份切换时重新绑定禁用日期点击事件
    onChangeMonthYear: function() {
      bindDisabledDateAlert();
    }
  });

  // 绑定禁用日期点击提示的函数
  function bindDisabledDateAlert() {
    // 移除已绑定的事件，避免重复触发
    $('.ui-datepicker-calendar .ui-state-disabled').off('click');
    // 给禁用日期绑定点击提示
    $('.ui-datepicker-calendar .ui-state-disabled').on('click', function() {
      alert('该日期超出可选范围，请选择近60天至当前日期内的日期');
    });
  }

  // 初始化完成后首次绑定事件
  bindDisabledDateAlert();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

核心逻辑说明 #

• 借助onChangeMonthYear事件：每次切换月份或年份时，日历会重新渲染日期单元格，此时需要重新绑定点击事件，确保新生成的禁用日期也能触发提示。
• 自定义绑定函数：先移除已有事件避免重复触发，再给带有ui-state-disabled类的禁用日期单元格绑定点击事件，弹出提示文案。
• 初始化后立即绑定：确保页面首次加载的日历中，禁用日期能正常触发提示。

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