如何在React中修改HTML日期输入框的自定义日期格式

原生 <input type="date"> 的显示格式由浏览器和系统区域设置决定，无法直接通过属性修改。要实现自定义的 yyyy-mm-dd 显示格式，推荐以下两种方案：

方案一：受控文本输入框 + 手动格式化 #

用普通文本输入框配合状态管理，手动处理输入内容的格式：

import { useState } from 'react';

export default function App() {
  const [date, setDate] = useState('');

  // 处理输入，确保输出格式为 yyyy-mm-dd
  const handleDateChange = (e) => {
    const rawValue = e.target.value.replace(/[^0-9]/g, '');
    let formatted = '';
    if (rawValue.length >= 4) {
      formatted += rawValue.slice(0, 4);
      if (rawValue.length >= 6) {
        formatted += '-' + rawValue.slice(4, 6);
        if (rawValue.length >= 8) {
          formatted += '-' + rawValue.slice(6, 8);
        }
      }
    }
    setDate(formatted);
  };

  return (
    <div>
      <input
        type="text"
        value={date}
        onChange={handleDateChange}
        placeholder="yyyy-mm-dd"
        maxLength={10}
      />
    </div>
  );
}

方案二：使用第三方日期组件 #

借助成熟的React日期组件库，直接配置格式即可，无需手写复杂逻辑，以 react-datepicker 为例：

1. 安装依赖：

npm install react-datepicker
# TypeScript 项目额外安装类型声明
npm install @types/react-datepicker

2. 组件使用示例：

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { useState } from 'react';

export default function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      dateFormat="yyyy-MM-dd"
    />
  );
}

注意：原生 input[type="date"] 的提交值默认是 yyyy-mm-dd，但显示格式受系统控制，无法强制修改，因此必须通过上述两种方式实现自定义显示格式。

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