如何限制jQuery UI Datepicker手动输入的最大日期？

我完全懂你的困扰——Datepicker面板确实限制了可选日期，但用户手动输入还是能绕开这个限制，而且用JSP的LocalDate设置input的min/max属性也没达到预期效果。下面给你几个实用的解决方案：

1. 利用Datepicker的onClose事件做即时验证 #

当用户关闭Datepicker面板时，直接校验输入的日期是否符合maxDate限制，如果超出就重置并提示：

$(function() {
  $("#your-datepicker-id").datepicker({
    maxDate: "0", // 限制为今天及之前的日期
    onClose: function(selectedDate) {
      // 获取配置的最大日期并转为可比较的Date对象
      const maxDate = $(this).datepicker("option", "maxDate");
      const dateFormat = $.datepicker._defaults.dateFormat;
      const inputDate = $.datepicker.parseDate(dateFormat, selectedDate);
      const allowedMaxDate = $.datepicker.parseDate(dateFormat, $.datepicker.formatDate(dateFormat, maxDate));

      // 校验日期是否超出范围
      if (inputDate > allowedMaxDate) {
        alert("日期不能超过今天！");
        // 重置为允许的最大日期
        $(this).val($.datepicker.formatDate(dateFormat, maxDate));
      }
    }
  });
});

2. 监听输入框blur事件，覆盖手动输入场景 #

用户可能直接在输入框输入后点击其他地方离开，这时候onClose不会触发，所以需要加个blur监听补全验证：

$("#your-datepicker-id").on("blur", function() {
  const inputValue = $(this).val();
  if (!inputValue) return;

  const maxDate = $(this).datepicker("option", "maxDate");
  const dateFormat = $.datepicker._defaults.dateFormat;
  const inputDate = $.datepicker.parseDate(dateFormat, inputValue);
  const allowedMaxDate = $.datepicker.parseDate(dateFormat, $.datepicker.formatDate(dateFormat, maxDate));

  if (inputDate > allowedMaxDate) {
    alert("请选择不超过今天的日期");
    $(this).val($.datepicker.formatDate(dateFormat, maxDate));
  }
});

3. 修复JSP设置min/max属性无效的问题 #

如果想用HTML5的原生限制，需要注意两个核心点：

• 你的input必须是type="date"（而非type="text"）
• LocalDate输出的日期格式必须是YYYY-MM-DD（HTML5 date类型要求的标准格式）

JSP代码应该这样写：

<input type="date" id="your-datepicker-id" max="${java.time.LocalDate.now().toString()}" />

不过要注意，jQuery UI Datepicker和原生type="date"输入框可能存在兼容性冲突，如果你同时使用两者，建议把input设为type="text"，完全依赖JS验证逻辑。

额外优化：禁用手动输入（可选） #

如果不想让用户手动输入，只允许通过Datepicker选择，可以直接禁用输入框的手动编辑：

<input type="text" id="your-datepicker-id" readonly />

这样用户只能点击面板选择日期，从根源上避免手动输入的问题。

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