antd 3.x DatePick数字手动输入、格式化及取值问题咨询

核心思路 #

通过接管DatePicker输入框的状态和事件，手动处理纯数字输入的格式化逻辑，同时同步DatePicker的日期值，解决无法获取输入值的问题。

实现代码 #

import React, { useState } from 'react';
import { DatePicker } from 'antd';

const CustomDatePicker = () => {
  // 存储DatePicker的Date对象值
  const [dateValue, setDateValue] = useState(null);
  // 存储输入框的格式化字符串
  const [inputStr, setInputStr] = useState('');

  // 把纯数字字符串格式化为YYYY-MM-DD
  const formatDateStr = (str) => {
    // 先过滤掉所有非数字字符
    const numStr = str.replace(/\D/g, '');
    // 按长度逐步拼接分隔符
    if (numStr.length <= 4) return numStr;
    if (numStr.length <= 6) return `${numStr.slice(0,4)}-${numStr.slice(4)}`;
    return `${numStr.slice(0,4)}-${numStr.slice(4,6)}-${numStr.slice(6,8)}`;
  };

  // 实时处理输入框内容变化
  const handleInputChange = (e) => {
    const formatted = formatDateStr(e.target.value);
    setInputStr(formatted);
  };

  // 处理DatePicker选择日期后的变化
  const handleDateChange = (date, dateStr) => {
    setDateValue(date);
    setInputStr(dateStr);
  };

  // 失焦时做最终格式化与校验
  const handleBlur = () => {
    const formatted = formatDateStr(inputStr);
    setInputStr(formatted);
    // 若格式完整，转换为Date对象同步到dateValue
    if (formatted.length === 10) {
      const [year, month, day] = formatted.split('-');
      const validDate = new Date(year, month - 1, day);
      // 校验日期合法性
      if (!isNaN(validDate.getTime())) {
        setDateValue(validDate);
      }
    }
  };

  return (
    <DatePicker
      value={dateValue}
      onChange={handleDateChange}
      inputProps={{
        value: inputStr,
        onChange: handleInputChange,
        onBlur: handleBlur,
      }}
      format="YYYY-MM-DD"
    />
  );
};

export default CustomDatePicker;

关键说明 #

• 利用inputProps接管输入框的value、onChange和onBlur事件，完全控制输入内容的格式化逻辑
• formatDateStr函数实时过滤非数字字符，并根据输入长度自动添加日期分隔符
• 失焦时做最终的格式校验与Date对象转换，确保值的合法性
• 可通过dateValue获取标准Date对象，或通过inputStr获取格式化后的字符串，满足不同业务需求

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