如何在MUI DateRangePicker桌面视图添加确定/取消按钮？

你可以通过自定义ActionBar组件来实现这一需求，MUI的DateRangePicker支持通过components属性覆盖默认的底部操作栏，具体步骤如下：

1. 导入所需组件
   首先确保已安装@mui/x-date-pickers-pro及相关依赖，然后导入必要模块：

import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Button, Box } from '@mui/material';
import { ActionBarProps } from '@mui/x-date-pickers-pro/internals/components/ActionBar';

2. 自定义操作栏组件
   创建包含「确定」和「取消」按钮的自定义ActionBar，绑定对应的回调方法：

const CustomActionBar = ({ onClose, onAccept }: ActionBarProps) => {
  return (
    <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, p: 2 }}>
      <Button variant="outlined" onClick={onClose}>
        取消
      </Button>
      <Button variant="contained" onClick={onAccept}>
        确定
      </Button>
    </Box>
  );
};

3. 在DateRangePicker中使用自定义组件
   将自定义的CustomActionBar传入components属性，替换默认操作栏：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateRangePicker
    value={/* 你的日期范围值 */}
    onChange={/* 你的日期变更回调 */}
    open={/* 控制选择器显示状态的变量 */}
    onOpenChange={/* 控制显示状态的回调 */}
    components={{
      ActionBar: CustomActionBar
    }}
  />
</LocalizationProvider>

说明 #

• onClose方法用于关闭日期选择器弹窗，onAccept方法用于确认当前选择的日期范围并触发onChange回调
• 可通过sx属性自定义操作栏的布局、间距等样式，适配自身UI需求
• 如果使用DesktopDateRangePicker，同样可通过components属性传入自定义ActionBar实现相同效果

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