如何自定义Material UI日期选择器弹窗样式，将默认文本框替换为选择器

实现方案 #

你当前使用的KeyboardDatePicker是带键盘输入能力的组件，默认会在弹窗顶部渲染输入框，要实现目标样式可按以下步骤调整：

• 组件替换：将KeyboardDatePicker更换为基础的DatePicker组件，该组件默认不在弹窗内展示输入框
• 自定义触发UI：通过renderInput属性重写外层触发弹窗的展示样式，替换默认的文本输入框为你需要的选择器样式
• 样式覆盖：若需要调整弹窗内部的年/月/日选择布局，可通过makeStyles覆盖弹窗容器的内置类名样式

调整后的代码示例 #

import { useState } from "react";
import { makeStyles } from "@material-ui/styles";
import { MuiPickersUtilsProvider, DatePicker } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import { Typography, Box } from "@material-ui/core";

const useStyle = makeStyles({
  root: {
    marginBottom: "3rem",
  },
  // 自定义选择器展示样式
  dateDisplay: {
    padding: "8px 12px",
    border: "1px solid #dcdcdc",
    borderRadius: "4px",
    cursor: "pointer",
    minWidth: "120px",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
  },
  // 覆盖弹窗内部样式，移除默认输入框容器的占位
  pickerPopup: {
    "& .MuiPickersBasePicker-pickerView": {
      paddingTop: 0
    }
  }
});

const CustomizeDatePicker = () => {
  const classes = useStyle();
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [open, setOpen] = useState(false);

  return (
    <div className={classes.root}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker
          autoOk
          label="end date"
          format="yyyy-MM-dd"
          views={["year", "month", "date"]}
          openTo="date"
          value={selectedDate}
          onChange={setSelectedDate}
          open={open}
          onOpen={() => setOpen(true)}
          onClose={() => setOpen(false)}
          PopoverProps={{
            classes: {
              paper: classes.pickerPopup
            }
          }}
          // 自定义触发的UI，替换默认输入框
          renderInput={() => (
            <Box 
              className={classes.dateDisplay} 
              onClick={() => setOpen(!open)}
            >
              <Typography>
                {selectedDate ? new Intl.DateTimeFormat('zh-CN', {
                  year: 'numeric',
                  month: '2-digit',
                  day: '2-digit'
                }).format(selectedDate) : '请选择日期'}
              </Typography>
              <span>▼</span>
            </Box>
          )}
        />
      </MuiPickersUtilsProvider>
    </div>
  );
};

export default CustomizeDatePicker;

如果需要弹窗内部直接展示年/月/日的下拉选择而不是日历网格，可以调整views属性的顺序，同时配合variant="inline"属性调整弹窗布局，也可以直接引入YearPicker、MonthPicker、DatePicker三个组件自行组合实现完全自定义的选择器结构。

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