如何阻止MUI X Date Picker的清除操作关闭弹窗

官方文档对清除操作的说明：

重置为空值并关闭选择器视图。

目前MUI X DatePicker没有直接控制该行为的props，你可以通过自定义清除按钮的逻辑来实现需求，具体代码修改如下：

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

function DateRangePicker() {
    const [date, setDate] = useState(null);
    const [open, setOpen] = useState(false);

    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
                closeOnSelect={false}
                open={open}
                onOpenChange={(newOpen) => setOpen(newOpen)}
                onChange={(date) => {
                    setDate(date);
                }}
                slotProps={{
                    actionBar: {
                        actions: [
                            () => (
                                <Button
                                    variant="text"
                                    onClick={() => {
                                        setDate(null);
                                        // 不触发模态框关闭逻辑
                                    }}
                                >
                                    清除
                                </Button>
                            )
                        ],
                    },
                }}
            />
        </LocalizationProvider>
    );
}

export default DateRangePicker;

实现逻辑说明 #

• 手动维护open状态控制模态框的显示/隐藏，替代组件内部的自动关闭逻辑
• 自定义清除按钮的点击事件，仅执行清除日期值的操作，跳过默认的关闭行为
• 使用MUI原生Button组件，保持与默认清除按钮一致的样式风格

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