如何在Material-UI V5(@mui/lab)日期选择器组件设置emptyLabel空标签

结论 #

该功能已在MUI v5中支持，没有单独设置emptyLabel属性，你可以通过调整格式化逻辑实现完全等效的效果。

具体实现方案 #

原material-ui-pickers的emptyLabel作用是自定义日期值为null时输入框内显示的文本，MUI v5中可以通过format属性的自定义函数实现：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';
import { useState } from 'react';

const Demo = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <DatePicker
      label="日期选择"
      value={selectedDate}
      onChange={(newVal) => setSelectedDate(newVal)}
      // 自定义格式化逻辑实现emptyLabel效果
      format={(value) => {
        if (value === null) {
          return '未选择日期'; // 此处替换为你需要的emptyLabel文本
        }
        // 非空时按需求格式化日期，示例为年-月-日格式
        return new Intl.DateTimeFormat('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        }).format(value);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  )
}

补充说明 #

如果你的需求是自定义弹窗底部清除按钮的显示文本，可以通过slotProps配置：

<DatePicker
  // 其他配置同上
  slotProps={{
    actionBar: {
      clearText: '清空选择'
    }
  }}
/>

另外MUI v5已经将原独立的KeyboardDatePicker组件整合到统一的DatePicker组件中，默认支持键盘输入，无需单独引入带Keyboard前缀的Picker组件。

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