如何点击按钮打开React MUI X日期选择器且不显示日期输入框

针对你需要点击按钮打开日历弹窗、隐藏输入框的需求，以下是两种可行的实现方案，基于最新版@mui/x-date-pickers：

方案一：直接修改DatePicker的slotProps（推荐） #

利用slotProps配置隐藏默认输入框，并自定义触发按钮，复用DatePicker自带的弹窗逻辑：

import { useState } from 'react';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import Button from '@mui/material/Button';

export default function NoInputDatePicker() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        value={selectedDate}
        onChange={(newValue) => setSelectedDate(newValue)}
        slotProps={{
          // 隐藏默认输入框
          input: { style: { display: 'none' } },
          // 自定义触发按钮，点击调用内置的openPicker方法
          trigger: ({ openPicker }) => (
            <Button variant="contained" onClick={openPicker}>
              选择日期
            </Button>
          )
        }}
        // 仅展示日期选择视图
        openTo="day"
        views={['day']}
      />
    </LocalizationProvider>
  );
}

关键配置说明： #

• slotProps.input.style.display: 'none'：直接隐藏默认输入框，比自定义空输入框更高效
• slotProps.trigger：替换默认触发元素为自定义按钮，通过openPicker方法触发日历弹窗
• openTo和views：限制日历仅展示日期选择界面，避免多余视图干扰

方案二：用Dialog包裹StaticDatePicker #

如果需要完全控制弹窗逻辑，可将静态日历放在Dialog中，手动管理弹窗的打开/关闭：

import { useState } from 'react';
import { StaticDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';

export default function DialogDatePicker() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Button variant="contained" onClick={() => setDialogOpen(true)}>
        选择日期
      </Button>
      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
        <DialogContent>
          <StaticDatePicker
            value={selectedDate}
            onChange={(newValue) => {
              setSelectedDate(newValue);
              setDialogOpen(false); // 选择日期后自动关闭弹窗
            }}
            openTo="day"
            views={['day']}
          />
        </DialogContent>
      </Dialog>
    </LocalizationProvider>
  );
}

方案优势： #

• 完全自定义弹窗的样式、动画和关闭逻辑
• 可在Dialog中添加额外内容（如确认/取消按钮）

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