Ant Design DatePicker自定义掩码输入无法输入及唤起日历问题求助

问题 #

集成带输入掩码的自定义输入组件时遇到两个问题：

• 无法输入值
• 输入框聚焦时无法唤起日历面板

原实现代码：

import { DatePicker as AntdDatePicker } from "antd";
import MaskedInput from "react-text-mask";
import React, { useState } from "react";

export function DatePicker(props) {
  const InputComponent = (propsInput) => {
    return (
      <MaskedInput
        {...propsInput}
        mask={[
          /[0-3]/,
          /[0-9]/,
          ".",
          /[0-1]/,
          /[0-9]/,
          ".",
          /[1-2]/,
          /\d/,
          /\d/,
          /\d/,
        ]}
        placeholder="dd.mm.yyyy"
      />
    );
  };
  return (
    <AntdDatePicker
      disabled={props?.isDisabled}
      disabledDate={props?.isDisabledDate}
      open={props?.isOpen}
      readOnly={props?.isReadonly}
      components={{
        input: InputComponent,
      }}
    />
  );
}

问题原因 #

1. 值传递不匹配：react-text-mask 的 onChange 回调参数格式与 Ant Design DatePicker 期望的不一致，导致输入值无法同步到 DatePicker 内部状态。
2. Ref 未正确传递：DatePicker 需要获取输入框的 DOM 引用以处理聚焦唤起日历的逻辑，原代码未将 ref 传递给 MaskedInput 的原生输入元素。
3. 格式不匹配：未设置 DatePicker 的 format 属性与掩码格式对齐，导致 DatePicker 无法正确解析输入的日期字符串。

修复后的代码 #

import { DatePicker as AntdDatePicker } from "antd";
import MaskedInput from "react-text-mask";
import React, { forwardRef } from "react";

// 使用 forwardRef 传递输入框引用
const MaskedDateInput = forwardRef((props, ref) => {
  const { onChange, ...restProps } = props;

  // 适配 react-text-mask 和 Antd DatePicker 的 onChange 格式
  const handleChange = (event, maskedValue) => {
    // 将格式化后的值传递给 DatePicker 的 onChange
    onChange?.(maskedValue);
    // 同步原生事件（保持与原生输入行为一致）
    onChange?.(event);
  };

  return (
    <MaskedInput
      {...restProps}
      ref={ref} // 将 ref 传递给 MaskedInput 的原生 input
      mask={[
        /[0-3]/,
        /[0-9]/,
        ".",
        /[0-1]/,
        /[0-9]/,
        ".",
        /[1-2]/,
        /\d/,
        /\d/,
        /\d/,
      ]}
      placeholder="dd.mm.yyyy"
      onChange={handleChange}
    />
  );
});

export function DatePicker(props) {
  return (
    <AntdDatePicker
      {...props}
      // 设置与掩码一致的日期格式，确保 DatePicker 正确解析输入值
      format="DD.MM.YYYY"
      components={{
        input: MaskedDateInput,
      }}
      // 移除不必要的 readOnly，避免阻止输入交互
      readOnly={false}
    />
  );
}

关键修复说明 #

• forwardRef 传递引用：通过 forwardRef 将 DatePicker 传入的 ref 传递给 MaskedInput 的原生输入元素，让 DatePicker 能够控制输入框的聚焦状态，从而唤起日历面板。
• onChange 适配：重新封装 onChange 回调，将 react-text-mask 返回的格式化后的值传递给 DatePicker，确保输入值能同步到 DatePicker 的内部状态。
• 格式对齐：设置 format="DD.MM.YYYY" 与掩码格式匹配，保证 DatePicker 能正确解析输入的日期字符串。
• 移除强制 readOnly：原代码中的 readOnly 会阻止输入交互，若需要只读状态可通过 disabled 属性替代。

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