英文:
How to open react material date picker without showing date text field
问题
I am using react material (MUI-X) date picker and my requirement is to open the date picker on button click.但我不想显示日期选择器的日期文本字段,只显示日历并选择日期。我尝试了多种解决方案,如自定义渲染文本字段和文本字段中的slotProps,但无法实现这种行为。有没有办法实现这个需求?我正在使用@mui/x-date-picker和它的最新版本。
I tried static date picker but I want modal kind of behavior.在非常高的层面上...我不想要文本字段。
英文:
I am using react material (MUI-X) date picker and my requirement os to open date picker on button click.But I do not want to show date text field of date picker, just show calender and select date.
I tried with multiple solutions like custom render text field and slotProps in text field but could not achieve this beahviour. Any idea how to achieve this
I ma using @mui/x-date-picker and its latest version
I tried statis date picker but i want modal kind of behaviour. At very high level...I do not want text field
答案1
得分: 2
如果你只想显示日期选择器,似乎StaticDatePicker满足你的需求,如果你希望它像其他版本一样弹出,你需要加入一个Popover。
export default function DatePickerPopOver() {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
null
);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
日期选择器
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDatePicker defaultValue={dayjs("2022-04-17")} />
</LocalizationProvider>
</Popover>
</div>
);
}
英文:
If all you want is to display the date picker, it seems that the StaticDatePicker satisfies your needs, and if you want it to pop up like the other versions you need to incorporate a Popover
export default function DatePickerPopOver() {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
null
);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
Date Picker
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDatePicker defaultValue={dayjs("2022-04-17")} />
</LocalizationProvider>
</Popover>
</div>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论