嘿，这个需求其实挺常见的，咱们直接用Datepicker自带的参数就能搞定，不用额外写复杂的验证逻辑～

大多数主流Datepicker插件（比如jQuery UI Datepicker）都自带日期范围限制的能力，咱们直接利用这个特性就能实现需求，同时搭配可选的提交验证来兜底。

1. 动态计算允许选择的最早日期 #

首先得算出当前年份往前推20年的日期——你可以选择限制到“20年前的今天”，也可以放宽到“20年前的1月1日”，看具体业务需求。用JS动态计算的代码如下：

// 获取当前日期
const today = new Date();
// 计算20年前的今天（如果要限制到当年1月1日，就把后两个参数改成0,1）
const minAllowedDate = new Date(today.getFullYear() - 20, today.getMonth(), today.getDate());

2. 配置Datepicker的日期范围 #

接下来把计算好的日期传给Datepicker的日期限制参数（不同插件参数名略有差异，这里以jQuery UI Datepicker为例）：

$(function() {
  const today = new Date();
  const minAllowedDate = new Date(today.getFullYear() - 20, today.getMonth(), today.getDate());
  
  $("#birthdate").datepicker({
    minDate: minAllowedDate, // 设置最早可选日期
    maxDate: 0, // 可选：如果需要禁止选择未来日期，加上这个参数（0代表今天）
    dateFormat: "yy-mm-dd", // 日期格式，根据你的页面需求调整
    // 可选：用户误选不符合要求的日期时，给出提示并清空
    onSelect: function(dateText) {
      const selectedDate = new Date(dateText);
      if (selectedDate < minAllowedDate) {
        alert("抱歉，您只能选择近20年内的日期");
        $(this).val("");
      }
    }
  });
});

如果用的是Bootstrap Datepicker，参数名会变成startDate和endDate，核心逻辑一致：

$("#birthdate").datepicker({
  startDate: minAllowedDate,
  endDate: "today",
  format: "yyyy-mm-dd"
});

3. 表单提交时的兜底验证（可选） #

为了防止用户手动在输入框里敲不符合要求的日期，建议在表单提交时再做一次验证：

$("form").submit(function(e) {
  const birthdateVal = $("#birthdate").val();
  if (!birthdateVal) return; // 为空的情况交给其他必填项验证处理
  
  const selectedDate = new Date(birthdateVal);
  const today = new Date();
  const minAllowedDate = new Date(today.getFullYear() - 20, today.getMonth(), today.getDate());
  
  if (selectedDate < minAllowedDate) {
    e.preventDefault(); // 阻止表单提交
    alert("出生日期不能早于20年前的今天");
  }
});

注意事项 #

• 不同Datepicker插件的参数名可能有差异，具体可以看对应插件的官方文档，但核心都是设置最小可选日期
• 如果业务要求是“只要年份不早于当前-20”（不管月份日期），可以把minAllowedDate改成new Date(today.getFullYear() - 20, 0, 1)（即20年前的1月1日）

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