如何将date类型输入框的显示格式固定为yyyy/mm/dd

原生<input type="date">的显示格式由浏览器根据系统区域设置决定，没有标准属性可以强制修改显示格式，你添加的format并非原生input的合法属性，因此不会生效。

方案1：文本输入框+自定义日期处理 #

完全控制输入显示格式，配合日期库确保输入合法性，灵活性更高。以下示例使用轻量库date-fns：

1. 安装依赖：

npm install date-fns

2. 组件代码：

import { format, isValid } from 'date-fns';
import { useState } from 'react';

export default function App() {
  const [displayDate, setDisplayDate] = useState('');
  // 存储ISO格式日期，用于后续业务逻辑
  const [standardDate, setStandardDate] = useState('');

  const handleInputChange = (e) => {
    const inputVal = e.target.value;
    // 尝试将输入解析为日期，兼容yyyy/mm/dd格式
    const parsedDate = new Date(inputVal.replace(/\//g, '-'));
    
    if (isValid(parsedDate)) {
      const formatted = format(parsedDate, 'yyyy/MM/dd');
      setDisplayDate(formatted);
      setStandardDate(format(parsedDate, 'yyyy-MM-dd'));
    } else {
      // 输入不合法时保留原始输入，可根据需求添加提示
      setDisplayDate(inputVal);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={displayDate}
        onChange={handleInputChange}
        placeholder="yyyy/mm/dd"
        pattern="\d{4}/\d{2}/\d{2}"
        title="请输入yyyy/mm/dd格式的日期"
      />
    </div>
  );
}

方案2：隐藏原生输入+自定义显示UI #

复用原生日期选择器的兼容性，同时用自定义元素控制显示格式：

import { useState } from 'react';

export default function App() {
  const [formattedDate, setFormattedDate] = useState('');

  const handleDateSelect = (e) => {
    const isoDate = e.target.value;
    if (!isoDate) {
      setFormattedDate('');
      return;
    }
    // 将ISO格式（yyyy-MM-dd）转换为yyyy/mm/dd
    const [year, month, day] = isoDate.split('-');
    setFormattedDate(`${year}/${month}/${day}`);
  };

  return (
    <div>
      {/* 隐藏原生date输入，仅用于触发选择器 */}
      <input
        type="date"
        onChange={handleDateSelect}
        style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}
        id="native-date-picker"
      />
      {/* 自定义显示区域，点击触发原生选择器 */}
      <div
        onClick={() => document.getElementById('native-date-picker').click()}
        style={{
          padding: '8px 12px',
          border: '1px solid #ccc',
          borderRadius: '4px',
          cursor: 'pointer',
          width: '120px'
        }}
      >
        {formattedDate || '选择日期'}
      </div>
    </div>
  );
}

补充说明 #

• 方案2的优势是保留了原生日期选择器的易用性，同时完全控制显示格式；
• 原生date输入的value始终为ISO格式（yyyy-MM-dd），该格式是后端接口的通用兼容格式；
• 若需复杂功能（如范围选择、时间选择），推荐使用成熟组件库（如antd DatePicker、react-datepicker），这类库均支持自定义显示格式。

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