如何为Material UI 5.11日期选择器添加「当前」选项？

要在DatePicker的弹出模态框中添加「当前」选项，你可以通过自定义弹窗底部的操作栏（ActionBar）来实现，具体步骤如下：

实现思路 #

• 利用DatePicker的slots属性重写默认的ActionBar组件
• 在自定义ActionBar中保留原有取消/确认按钮，新增「当前」按钮
• 绑定「当前」按钮的点击事件，将日期设为当前月份，同时更新数据并关闭弹窗

修改后的完整代码 #

import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TextField } from '@mui/material';
import dayjs from 'dayjs';

// 自定义底部操作栏组件
const CustomActionBar = ({ onAccept, onCancel, setValue, setOpen }) => {
  const handleCurrentClick = () => {
    // 设置为当前月份的第一天，适配year/month视图的选择逻辑
    const currentMonth = dayjs().startOf('month').toDate();
    setValue(currentMonth);
    onAccept();
    setOpen(false);
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', padding: '16px' }}>
      <button onClick={handleCurrentClick} style={{
        padding: '6px 16px',
        border: '1px solid #ccc',
        borderRadius: '4px',
        background: '#fff',
        cursor: 'pointer',
        fontSize: '14px'
      }}>
        当前
      </button>
      <button onClick={onCancel} style={{
        padding: '6px 16px',
        border: '1px solid #ccc',
        borderRadius: '4px',
        background: '#fff',
        cursor: 'pointer',
        fontSize: '14px'
      }}>
        取消
      </button>
      <button onClick={onAccept} style={{
        padding: '6px 16px',
        border: 'none',
        borderRadius: '4px',
        background: '#1976d2',
        color: '#fff',
        cursor: 'pointer',
        fontSize: '14px'
      }}>
        确认
      </button>
    </div>
  );
};

// 你的业务组件
export default function ResumeDatePicker() {
  // 注：以下状态及store操作需根据你的实际项目调整
  // const [store, updateExp1end] = useStore();
  // const [openEnd1, setOpenEnd1] = useState(false);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        views={["year", "month"]}
        label="End"
        minDate={dayjs("2012-03-01")}
        maxDate={dayjs("2023-06-01")}
        value={
          store.exp1end
            ? dayjs(store.exp1end.slice(1, 8)).toDate()
            : dayjs().startOf('month').toDate()
        }
        onChange={(newValue) => {
          updateExp1end(newValue);
        }}
        open={openEnd1}
        onOpen={() => setOpenEnd1(true)}
        onClose={() => setOpenEnd1(false)}
        // 替换默认的ActionBar插槽
        slots={{
          ActionBar: (props) => (
            <CustomActionBar
              {...props}
              setValue={(val) => updateExp1end(val)}
              setOpen={setOpenEnd1}
            />
          )
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            onClick={(e) => setOpenEnd1(true)}
            sx={{
              marginTop: "-.70em",
              "@media (max-width: 920px)": {
                marginTop: "2rem !important;",
              },
            }}
          />
        )}
      />
    </LocalizationProvider>
  );
}

关键细节说明 #

• 自定义ActionBar完全复用了原弹窗的操作逻辑，仅新增「当前」按钮，不破坏原有日期选择流程
• 将默认值调整为当前月份第一天，保证「当前」选项的显示与选择逻辑统一
• 移除了原TextField的helperText，因为「当前」选项已直接集成在弹窗内，更符合交互预期

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