Ant Design DatePicker问题咨询：手动输入日期加掩码及无需确认生效

一、给手动输入框添加掩码 #

Ant Design 原生DatePicker没有内置输入掩码功能，但可以通过传递inputProps给内部Input组件来实现，结合format属性保证格式一致：

• 需使用Ant Design 5.x及以上版本（Input组件从5.x开始支持mask属性）
• 针对YYYY-MM-DD格式，配置inputProps={{ mask: '9999-99-99' }}
• 同步设置format="YYYY-MM-DD"确保日期解析正确

代码示例：

import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';

export default function MaskedDatePicker() {
  const [date, setDate] = useState(null);

  return (
    <DatePicker
      format="YYYY-MM-DD"
      value={date}
      onChange={setDate}
      inputProps={{
        mask: '9999-99-99',
        placeholder: 'YYYY-MM-DD'
      }}
    />
  );
}

如果是其他格式（如MM/DD/YYYY），只需调整mask和format：mask: '99/99/9999'、format="MM/DD/YYYY"。

二、输入内容无需点击确认按钮即时生效 #

默认手动输入后需点击弹窗确认或失焦才会更新值，要实现即时生效，可监听输入框的输入事件，手动解析并更新组件状态：

1. 通过inputProps绑定onChange事件，获取输入文本
2. 用dayjs严格解析文本为日期对象
3. 解析有效时直接更新组件的value

代码示例：

import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';

export default function AutoConfirmDatePicker() {
  const [date, setDate] = useState(null);

  const handleInputChange = (e) => {
    const inputVal = e.target.value;
    const parsedDate = dayjs(inputVal, 'YYYY-MM-DD', true);
    if (parsedDate.isValid()) {
      setDate(parsedDate);
    }
    // 解析无效时可根据需求保留输入或清空
  };

  return (
    <DatePicker
      format="YYYY-MM-DD"
      value={date}
      onChange={setDate}
      inputProps={{
        mask: '9999-99-99',
        onChange: handleInputChange
      }}
      // 可选：隐藏弹窗，仅作为输入框使用
      open={false}
    />
  );
}

说明：

• 若需要保留日期选择弹窗，移除open={false}即可，输入有效日期后仍会自动更新值
• dayjs的第三个参数true开启严格模式，只有完全匹配格式的输入才会被认定为有效日期

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