ReactJS原生type=date选择器如何移除/禁用弹窗的清除与今日按钮

原生type="date"的日期选择器弹窗由浏览器自主渲染，没有直接的React/HTML属性可控制这两个按钮，只能通过CSS隐藏浏览器内置的对应元素。以下是针对主流浏览器的适配方案：

一、Chrome/Edge（Blink引擎） #

/* 隐藏清除按钮 */
input[type="date"]::-webkit-clear-button {
  display: none;
}

/* 隐藏弹窗底部的“今日”按钮栏 */
input[type="date"]::-webkit-calendar-picker-dialog > div:last-child {
  display: none;
}

二、Firefox #

/* 隐藏清除按钮 */
input[type="date"]::-moz-clear-button {
  display: none;
}

/* 隐藏“今日”按钮所在的底部栏 */
input[type="date"]::-moz-date-picker::part(footer) {
  display: none;
}

三、Safari #

/* 隐藏清除按钮 */
input[type="date"]::-webkit-clear-button {
  display: none;
}

/* 隐藏“今日”按钮 */
input[type="date"]::-webkit-calendar-picker-dialog .today-button {
  display: none;
}

在React中使用 #

将上述CSS写入组件对应的样式文件（如DatePicker.css），然后给日期输入框添加类名关联样式，避免全局样式污染：

import React from 'react';
import './DatePicker.css';

const CustomDatePicker = () => {
  return <input type="date" className="custom-date-input" />;
};

export default CustomDatePicker;

对应的DatePicker.css内容：

.custom-date-input::-webkit-clear-button {
  display: none;
}

.custom-date-input::-webkit-calendar-picker-dialog > div:last-child {
  display: none;
}

.custom-date-input::-moz-clear-button {
  display: none;
}

.custom-date-input::-moz-date-picker::part(footer) {
  display: none;
}

.custom-date-input::-webkit-calendar-picker-dialog .today-button {
  display: none;
}

注意事项 #

• 这些CSS选择器是浏览器私有属性，可能随浏览器版本更新发生变化，需在目标浏览器版本中测试验证。
• 如果需要更稳定、高度定制的日期选择器，建议使用第三方组件（如react-datepicker、Ant Design DatePicker等），这类组件支持完全自定义弹窗内容。

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