ReactJS日期输入组件问题求助：年份限制与修改异常

问题1：年份输入长度超限 #

当前日期输入允许输入超过4位的年份（如01/04/202222），原因是原生type="date"输入在部分浏览器支持手动自由输入，且组件未做严格的格式校验。

修复方案： #

1. 添加输入校验：在onChange事件中校验输入的日期格式是否为合法的YYYY-MM-DD；
2. 统一存储格式：将日期存储为完整4位年份的格式，避免解析异常；
3. 兼容回显逻辑：回显时同时支持4位和2位年份的解析，确保历史数据正常展示。

修改后的核心代码片段： #

<input
    data-form-user="birth_date"
    value={userInfo?.birth_date 
        ? moment(userInfo.birth_date, ['MM/DD/YYYY', 'MM/DD/YY']).format('YYYY-MM-DD') 
        : ''}
    required
    type="date"
    id="birth_date"
    name="birth_date"
    className="form-control font-weight-bold rounded-0 border-[#000000]"
    placeholder="Date of Birth"
    onChange={(event) => {
        const selectedDate = event.target.value;
        // 校验日期格式是否合法
        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
        if (!dateRegex.test(selectedDate)) return;
        
        const parsedDate = new Date(selectedDate);
        if (isNaN(parsedDate.getTime())) return;
        
        setStartDate(parsedDate);
        // 存储为4位年份格式
        const formattedDate = moment(selectedDate).format('MM/DD/YYYY');
        setUserInfo(prev => ({
            ...prev,
            "birth_date": formattedDate
        }));
    }}
    autoComplete="off"
/>

问题2：无法修改年份为1900年代 #

当前问题源于存储的日期是2位年份格式（MM/DD/YY），moment解析两位年份时默认映射到1969-2068区间，导致19XX的年份被自动转为20XX，无法正常修改。

修复方案： #

1. 存储完整4位年份：将birth_date的存储格式改为MM/DD/YYYY，彻底消除两位年份的解析歧义；
2. 添加年份范围校验：可选限制年份范围（比如出生日期只能在1900到当前年份之间），避免无效输入。

关键修改点： #

• 将onChange中的日期格式化从format('MM/DD/YY')改为format('MM/DD/YYYY')；
• 回显时指定moment的解析格式，兼容4位和2位年份；
• 可选添加年份范围校验：

// 在onChange中添加年份范围校验
const currentYear = new Date().getFullYear();
const year = parsedDate.getFullYear();
if (year < 1900 || year > currentYear) {
    alert('请输入合理的出生日期年份');
    return;
}

完整修正后的组件代码： #

<input
    data-form-user="birth_date"
    value={userInfo?.birth_date 
        ? moment(userInfo.birth_date, ['MM/DD/YYYY', 'MM/DD/YY']).format('YYYY-MM-DD') 
        : ''}
    required
    type="date"
    id="birth_date"
    name="birth_date"
    className="form-control font-weight-bold rounded-0 border-[#000000]"
    placeholder="Date of Birth"
    onChange={(event) => {
        const selectedDate = event.target.value;
        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
        if (!dateRegex.test(selectedDate)) return;
        
        const parsedDate = new Date(selectedDate);
        if (isNaN(parsedDate.getTime())) return;
        
        // 限制年份范围示例
        const currentYear = new Date().getFullYear();
        const year = parsedDate.getFullYear();
        if (year < 1900 || year > currentYear) {
            alert('请输入合理的出生日期年份');
            return;
        }
        
        setStartDate(parsedDate);
        const formattedDate = moment(selectedDate).format('MM/DD/YYYY');
        setUserInfo(prev => ({
            ...prev,
            "birth_date": formattedDate
        }));
    }}
    autoComplete="off"
/>

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