如何在Moment.js中启用/验证仅允许当前日期至50年前的日期输入？

核心思路 #

先算出允许选择的最早日期（当前日期往前推50年），再通过Moment.js的日期方法验证用户输入或配置日期选择器的禁用规则。

1. 计算允许的日期范围 #

用Moment.js的subtract()方法直接生成最早可选择日期，最晚日期就是当前日期：

// 计算50年前的今天（精确到当天开始，忽略时间干扰）
const minAllowedDate = moment().subtract(50, 'years').startOf('day');
// 计算当前日期（精确到当天结束）
const maxAllowedDate = moment().endOf('day');

2. 验证用户手动输入的日期 #

如果是用户手动输入日期的场景，可通过以下逻辑做校验：

// 假设用户输入的日期字符串为userInputDate
const selectedDate = moment(userInputDate);

// 第一步：检查日期格式是否有效
if (!selectedDate.isValid()) {
  console.log('请输入有效的日期格式');
  return;
}

// 第二步：检查是否在允许范围内
// '[]'表示包含两端日期（允许选择今天和50年前的今天）
const isInRange = selectedDate.isBetween(minAllowedDate, maxAllowedDate, 'day', '[]');

if (isInRange) {
  console.log('日期符合要求');
} else {
  console.log('请选择今天到50年前之间的日期');
}

3. 结合UI日期选择器配置（常见场景） #

多数日期选择器组件支持通过属性或函数禁用超出范围的日期，以下是两种典型配置方式：

场景A：直接设置min/max属性

比如Bootstrap Datepicker、Ant Design DatePicker等，可直接传入格式化后的日期字符串：

// 转成组件需要的格式（例：YYYY-MM-DD）
const minDateStr = minAllowedDate.format('YYYY-MM-DD');
const maxDateStr = maxAllowedDate.format('YYYY-MM-DD');

// 配置组件（伪代码，根据实际组件调整）
datePicker.setOptions({
  minDate: minDateStr,
  maxDate: maxDateStr
});

场景B：通过禁用函数控制（例：Element UI DatePicker）

部分组件需要自定义禁用逻辑，返回true表示禁用该日期：

disabledDate(date) {
  const minDate = moment().subtract(50, 'years').startOf('day');
  const maxDate = moment().endOf('day');
  // 禁用早于50年前或晚于今天的日期
  return date < minDate || date > maxDate;
}

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