如何让Form.Control date类型日期选择器显示月份名称？

原生的<input type="date">（也就是React Bootstrap的Form.Control type="date"底层依赖的元素）不支持自定义显示格式，它的展示样式完全由用户的浏览器和操作系统区域设置决定，无法直接输出20 Sep 2022这类带月份缩写的格式。

如果不想使用MuiPickersUtilsProvider，你可以通过「隐藏原生输入框+自定义显示层」的方式实现需求，同时保留原生日期选择的功能。具体实现如下：

import { useState } from 'react';
import { Form } from 'react-bootstrap';

// 格式化日期为 DD MMM YYYY 格式
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return new Intl.DateTimeFormat('en-GB', {
    day: '2-digit',
    month: 'short',
    year: 'numeric'
  }).format(date);
};

function CustomDateInput() {
  const [startDate, setStartDate] = useState('2022-09-20');

  const handleDateChange = (e) => {
    setStartDate(e.target.value);
  };

  return (
    <Form.Group>
      {/* 隐藏原生日期输入框，但保留其功能 */}
      <Form.Control
        type="date"
        name="startDate"
        value={startDate}
        min="2022-09-20"
        onChange={handleDateChange}
        style={{ position: 'absolute', opacity: 0, zIndex: -1 }}
      />
      {/* 自定义显示层，点击时触发原生输入框的点击事件 */}
      <div
        onClick={() => document.querySelector('input[name="startDate"]').click()}
        style={{
          padding: '0.375rem 0.75rem',
          border: '1px solid #ced4da',
          borderRadius: '0.375rem',
          cursor: 'pointer',
          width: 'fit-content'
        }}
      >
        {formatDate(startDate)}
      </div>
    </Form.Group>
  );
}

export default CustomDateInput;

代码要点说明 #

• 用内联样式隐藏原生Form.Control，但它依然能处理日期选择和值的绑定逻辑
• 自定义的div作为可视化显示层，点击时触发原生输入框的点击事件，唤起系统日期选择器
• formatDate函数利用Intl.DateTimeFormatAPI将日期字符串转为目标格式，你可以修改区域代码（比如en-US）来调整格式细节

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