如何在MUI DatePicker日期选择器中添加自定义额外文本？

参考效果示意图：

你可以根据自定义文本要放的位置，选择对应的实现方案：

方案1：在日期选择弹窗内部添加自定义文本 #

通过DateTimePicker的ToolbarComponent属性自定义顶部工具栏，注入你需要的额外文本即可，修改后的代码如下：

import React, { useState } from "react";
import { DateTimePicker } from "@material-ui/pickers";
import Typography from "@material-ui/core/Typography";

// 自定义工具栏组件，在默认工具栏基础上添加额外文本
const CustomToolbar = (props) => {
  return (
    <div>
      {/* 保留原有默认工具栏 */}
      <DateTimePicker.Toolbar {...props} />
      {/* 新增的自定义文本，可自行调整样式 */}
      <Typography variant="caption" style={{ padding: '0 16px 8px', color: '#666' }}>
        Extra Text
      </Typography>
    </div>
  );
};

function InlineDateTimePickerDemo(props) {
  const [selectedDate, handleDateChange] = useState(new Date("2018-01-01T00:00:00.000Z"));

  return (
    <>
      <DateTimePicker
        variant="inline"
        label="Input Label"
        value={selectedDate}
        onChange={handleDateChange}
        {/* 传入自定义工具栏组件 */}
        ToolbarComponent={CustomToolbar}
      />
    </>
  );
}

export default InlineDateTimePickerDemo;

如果你的额外文本要放在弹窗底部，可以通过DialogProps属性自定义弹窗底部内容，实现逻辑和自定义工具栏一致。

方案2：在输入框下方添加自定义辅助文本 #

直接使用组件内置的helperText属性即可，代码示例：

<DateTimePicker
  variant="inline"
  label="Input Label"
  value={selectedDate}
  onChange={handleDateChange}
  helperText="Extra Text"
/>

如果需要自定义辅助文本的样式，可以外层包裹FormControl组件，单独引入FormHelperText组件自行控制样式。

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