如何在Datepicker中禁用下月日期及未来30天日期？

阿华AIGC实验室

2026-5-21

搞定jQuery UI Datepicker的两个日期禁用需求

我来帮你解决这两个Datepicker的日期限制问题，直接上可行的代码和清晰的解释：

需求一：禁用下月日期

要实现这个，我们可以利用Datepicker的beforeShowDay回调函数，它会逐个检查每个日期，返回数组来决定是否禁用该日期。核心是判断日期的月份是否超过当前月份：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入jQuery UI样式，保证Datepicker显示正常 -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <script>
    $(function() {
      // 获取当前月份（注意JS里月份是0-based，比如3月对应2）
      const currentMonth = new Date().getMonth();
      
      $("#datepicker").datepicker({
        beforeShowDay: function(date) {
          // 判断当前日期是否属于下月
          const isNextMonth = date.getMonth() > currentMonth;
          // 返回数组：[是否可用, 自定义CSS类, 禁用提示文本]
          return [!isNextMonth, "", isNextMonth ? "下月日期不可选" : ""];
        }
      });
    });
  </script>
</head>
<body>
  <div class="demo">
    <p>选择日期：<input type="text" id="datepicker"></p>
  </div>
</body>
</html>

说明： 这段代码会把所有下月的日期置灰并禁止选择，当前月及之前的日期可以正常选择。另外我去掉了你代码里重复引入的jQuery，避免潜在冲突。

需求二：禁用未来30天内的日期（仅可选择30天后的日期）

这个需求其实有更简洁的实现方式——直接用Datepicker的minDate选项，不需要写复杂的回调：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <script>
    $(function() {
      // 计算今天加上30天的日期
      const today = new Date();
      const minSelectableDate = new Date(today);
      minSelectableDate.setDate(today.getDate() + 30);
      
      $("#datepicker-30days").datepicker({
        // 直接设置最小可选日期
        minDate: minSelectableDate,
        // 可选：添加禁用提示
        beforeShowDay: function(date) {
          const isDisabled = date <= minSelectableDate;
          return [!isDisabled, "", isDisabled ? "未来30天内日期不可选" : ""];
        }
      });
    });
  </script>
</head>
<body>
  <div class="demo">
    <p>选择30天后的日期：<input type="text" id="datepicker-30days"></p>
  </div>
</body>
</html>

说明： minDate是Datepicker内置的选项，直接传入计算好的日期就能自动禁用该日期之前的所有选项。如果需要自定义禁用提示，可以搭配beforeShowDay使用，否则只保留minDate一行代码就足够了。

内容的提问来源于stack exchange，提问作者J. Doe