React中Bootstrap datepicker如何限制选择当前及未来日期

原生type="date"输入框原生支持max属性限制可选的最大日期，只要给这个属性传入符合YYYY-MM-DD格式的昨日日期，就能直接实现「禁止选择今日及未来日期」的效果，不需要依赖Bootstrap datepicker的额外API，兼容性覆盖所有现代浏览器。

实现步骤 #

• 编写工具方法计算本地时区下的昨日日期，注意规避UTC时差导致的日期计算偏差
• 将计算得到的日期值绑定到date输入框的max属性上
• 可选添加onChange兜底校验，防止用户绕过原生限制手动输入非法日期

修改后完整代码 #

import React from "react";

export default function DatePicker() {
  // 计算可选的最大日期：昨天，格式为YYYY-MM-DD
  const getMaxAllowedDate = () => {
    const date = new Date();
    // 日期减1天，排除今天
    date.setDate(date.getDate() - 1);
    const year = date.getFullYear();
    // 月份从0开始计数，需要+1，不足两位补前导零
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  const maxDate = getMaxAllowedDate();

  // 兜底校验：防止手动输入非法日期
  const handleDateChange = (e) => {
    const selectedVal = e.target.value;
    if (selectedVal && selectedVal > maxDate) {
      e.target.value = '';
      alert('出生日期不能选择今天或未来日期');
    }
  };

  return (
    <div>
      <div className="col-sm-4 col-md-3 col-lg-3 form-group required">
        <label className="control-label">Date of Birth : </label>
      </div>
      <div className="col-sm-7 offset-1 col-md-8 col-lg-8">
        <input
          className="text-uppercase input-group input-group-lg form-control"
          type="date"
          name="dob"
          max={maxDate}
          onChange={handleDateChange}
        />
      </div>
    </div>
  );
}

注意事项 #

• 不要使用new Date().toISOString().split('T')[0]的方式生成日期字符串，该方法基于UTC时区计算，在国内凌晨时段会出现日期偏差1天的问题，使用本地时间拼接的方式稳定性最高
• 该方案和Bootstrap的表单样式完全兼容，不需要额外调整CSS类
• 如果后续需求调整为允许选择今天，只要删除date.setDate(date.getDate() - 1)这行代码即可

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