升级@material-ui/pickers至3.x后，如何自定义键盘输入与日期格式？

刚好我之前升级到3.x时也碰到过一模一样的问题——这版本对输入格式的校验逻辑比2.x严格太多了，默认的格式匹配完全不兼容之前的自由输入习惯。下面针对你要的两种行为，给你具体的实现方案：

方案1：恢复2.x风格的自由输入（支持任意单/双位日/月） #

3.x默认会严格按照你设置的format来校验输入，所以我们得自定义解析和格式化逻辑，让它能识别多种日期格式。借助@date-io/moment的扩展能力，我们可以重写它的解析方法：

import React from 'react';
import { DatePicker } from '@material-ui/pickers';
import MomentUtils from '@date-io/moment';
import moment from 'moment';

// 自定义Moment工具类，兼容多种日期格式
class CustomMomentUtils extends MomentUtils {
  parse(value, format) {
    if (!value) return null;
    // 把所有可能的输入格式都列进去，覆盖单/双位日/月的组合
    const acceptableFormats = [format, 'D.M.YYYY', 'DD.M.YYYY', 'D.MM.YYYY', 'DD.MM.YYYY'];
    // 用moment的多格式解析，确保各种输入都能被正确识别
    return moment(value, acceptableFormats, true);
  }

  // 保持输出格式和你设置的一致
  format(date, format) {
    return moment(date).format(format);
  }
}

// 使用自定义工具类的日期选择器
function FlexibleDatePicker() {
  const [selectedDate, handleDateChange] = React.useState(null);

  return (
    <DatePicker
      value={selectedDate}
      onChange={handleDateChange}
      format="D.M.YYYY"
      utils={CustomMomentUtils}
      inputProps={{
        // 取消输入正则校验，允许用户输入任意字符（和2.x完全一致）
        pattern: '.*',
        inputMode: 'text',
      }}
    />
  );
}

这个方案的核心是：

• 重写parse方法，让moment尝试用多种格式解析输入，不管用户输1.1.2000还是04.08.2000都能正确识别。
• 通过inputProps设置pattern: '.*'，彻底放开输入限制，和2.x一样允许用户输入任何内容（包括非数字字符，之后解析时会自动处理）。

方案2：监听.按键自动跳转输入区域 #

如果想要更规整的输入体验，我们可以给输入框绑定键盘事件，监听.按键来自动跳转到下一个输入区域。这里需要借助inputRef来获取输入框的DOM元素，手动控制光标位置：

import React, { useRef } from 'react';
import { DatePicker } from '@material-ui/pickers';
import MomentUtils from '@date-io/moment';

function DatePickerWithAutoJump() {
  const [selectedDate, handleDateChange] = React.useState(null);
  const inputRef = useRef(null);

  const handleDotKey = (e) => {
    if (e.key !== '.') return;

    e.preventDefault(); // 先阻止默认的点输入，我们自己处理格式和光标
    const input = inputRef.current;
    const currentVal = input.value;
    const cursorPos = input.selectionStart;

    let newVal = currentVal;
    let newCursorPos = cursorPos;

    // 判断当前光标位置，决定补全格式并跳转
    if (cursorPos <= 2 && currentVal.match(/^\d{1,2}$/)) {
      // 正在输入日，按.后补全点，光标跳到月输入区
      newVal = `${currentVal}.`;
      newCursorPos = newVal.length;
    } else if (cursorPos >= 3 && currentVal.slice(3).match(/^\d{1,2}$/)) {
      // 正在输入月，按.后补全点，光标跳转到年输入区
      newVal = `${currentVal.slice(0, 3)}${currentVal.slice(3)}.`;
      newCursorPos = newVal.length;
    }

    // 更新输入值和光标位置
    input.value = newVal;
    input.setSelectionRange(newCursorPos, newCursorPos);
  };

  return (
    <DatePicker
      value={selectedDate}
      onChange={handleDateChange}
      format="DD.MM.YYYY"
      utils={MomentUtils}
      inputRef={inputRef}
      inputProps={{
        onKeyDown: handleDotKey,
      }}
    />
  );
}

这个方案的效果是：

• 用户输入1后按.，输入框会变成1.，光标自动跳到.后面等着输月；
• 输入2后再按.，输入框变成1.2.，光标跳到.后面等着输年；
• 完全符合你想要的分段输入自动跳转的需求。

如果想要更丝滑的掩码输入体验，也可以结合react-input-mask这类库来做，但上面的代码已经能满足基础需求了。

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