如何让日期输入框年份输入4位后自动跳转并限制输入长度

原生的type="date"输入框年份字段存在两个问题：输入4位后仍可继续输入，第5位会替换首位；且不会自动切换焦点到月份输入框。以下提供两种可行的解决思路：

方案一：基于原生date控件的JS处理 #

保留浏览器自带的日历选择和日期验证功能，通过监听输入事件实现限制和焦点切换：

1. 首先给控件添加ref用于获取DOM元素：

import { useRef, useState } from 'react';
import { Form } from 'react-bootstrap';

// 假设你的组件内已有initialValues和setInitialValues
const dateInputRef = useRef<HTMLInputElement>(null);

2. 修改Form.Control组件，添加输入监听逻辑：

<Form.Control
  type='date'
  max='9999-12-31'
  size='sm'
  value={initialValues.birthDate}
  ref={dateInputRef}
  onInput={(e) => {
    const input = e.target as HTMLInputElement;
    const dateValue = input.value;
    
    if (dateValue) {
      const [year, month, day] = dateValue.split('-');
      // 限制年份最多4位
      if (year.length > 4) {
        const truncatedYear = year.slice(0, 4);
        const validDate = `${truncatedYear}-${month || '01'}-${day || '01'}`;
        input.value = validDate;
        setInitialValues({ ...initialValues, birthDate: validDate });
      }
      // 年份输入满4位时自动切换到月份输入框
      else if (year.length === 4) {
        // 通过模拟右箭头按键事件触发焦点切换（适配多数浏览器）
        const arrowRightEvent = new KeyboardEvent('keydown', { key: 'ArrowRight' });
        input.dispatchEvent(arrowRightEvent);
      }
    }
    // 同步正常输入的状态
    setInitialValues({ ...initialValues, birthDate: input.value });
  }}
/>

注意：不同浏览器对date控件的内部实现有差异，模拟按键的方式可能在部分浏览器中效果不稳定。另外，原生date控件不支持max-length属性，该设置不会生效，必须通过JS截断。

方案二：拆分成年/月/日独立输入框（更可靠） #

完全自定义输入逻辑，彻底解决兼容性问题，同时可灵活控制每个字段的行为：

1. 拆分日期状态，单独管理年、月、日输入值：

import { useState, useEffect } from 'react';
import { Form } from 'react-bootstrap';

// 拆分日期字段状态
const [birthDateParts, setBirthDateParts] = useState({
  year: '',
  month: '',
  day: ''
});

// 同步拆分后的日期到原birthDate状态
useEffect(() => {
  const { year, month, day } = birthDateParts;
  // 仅当三个字段都符合格式时才同步
  if (year.length === 4 && month.length === 2 && day.length === 2) {
    setInitialValues({
      ...initialValues,
      birthDate: `${year}-${month}-${day}`
    });
  }
}, [birthDateParts, initialValues, setInitialValues]);

2. 编写输入处理函数，实现长度限制和自动焦点切换：

const handleDateInput = (field: 'year' | 'month' | 'day', value: string) => {
  // 只允许输入数字
  const numericValue = value.replace(/\D/g, '');
  // 按字段限制输入长度
  const limitedValue = field === 'year' 
    ? numericValue.slice(0, 4) 
    : numericValue.slice(0, 2);

  setBirthDateParts(prev => ({ ...prev, [field]: limitedValue }));

  // 输入满长度时自动切换到下一个字段
  const maxLength = field === 'year' ? 4 : 2;
  if (limitedValue.length === maxLength) {
    const nextFieldId = field === 'year' ? 'birth-month' : field === 'month' ? 'birth-day' : '';
    if (nextFieldId) {
      document.getElementById(nextFieldId)?.focus();
    }
  }
};

3. 渲染三个独立的输入框：

<div className="d-flex align-items-center gap-2">
  <Form.Control
    id="birth-year"
    type="text"
    placeholder="YYYY"
    size="sm"
    value={birthDateParts.year}
    onChange={(e) => handleDateInput('year', e.target.value)}
    maxLength={4}
  />
  <span className="text-muted">/</span>
  <Form.Control
    id="birth-month"
    type="text"
    placeholder="MM"
    size="sm"
    value={birthDateParts.month}
    onChange={(e) => handleDateInput('month', e.target.value)}
    maxLength={2}
  />
  <span className="text-muted">/</span>
  <Form.Control
    id="birth-day"
    type="text"
    placeholder="DD"
    size="sm"
    value={birthDateParts.day}
    onChange={(e) => handleDateInput('day', e.target.value)}
    maxLength={2}
  />
</div>

补充：这种方案需要自行添加日期有效性验证（比如月份范围1-12，日期对应月份的最大天数等），可以结合date-fns或moment等工具库实现。

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