英文:
Dialog Overlap in Date Selection Box, Material UI
问题
I am having an issue with my React/Material UI Dialog box being used to gather date information form a user. Right now I have 2 layers of dialog layered over each other in the input box. When clicking either of the input boxes the issue resolves itself and everything looks good, but in the first state it looks broken. Any advice would be appreciated. Thanks!
import React, { useState } from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
const DownloadDialog = () => {
const [openDialog, setOpenDialog] = useState(false);
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const handleOpenDialog = () => {
setOpenDialog(true);
};
const handleCloseDialog = () => {
setOpenDialog(false);
};
const handleDownloadCSV = () => {
// Perform download logic using startDate and endDate values
console.log('Download CSV');
console.log('Start Date:', startDate);
console.log('End Date:', endDate);
// Close the dialog
handleCloseDialog();
};
const handleStartDateChange = (event) => {
setStartDate(event.target.value);
};
const handleEndDateChange = (event) => {
setEndDate(event.target.value);
};
return (
<>
<Button color="inherit" onClick={handleOpenDialog}>
Download CSV
</Button>
<Dialog open={openDialog} onClose={handleCloseDialog}>
<DialogTitle>Download CSV</DialogTitle>
<DialogContent>
<DialogContentText>
Please enter the date range for the CSV file.
</DialogContentText>
<TextField
autoFocus
margin="dense"
label="Start Date"
type="date"
value={startDate}
onChange={handleStartDateChange}
fullWidth
/>
<TextField
margin="dense"
label="End Date"
type="date"
value={endDate}
onChange={handleEndDateChange}
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>Cancel</Button>
<Button onClick={handleDownloadCSV}>Download</Button>
</DialogActions>
</Dialog>
</>
);
};
export default DownloadDialog;
<details>
<summary>英文:</summary>
I am having an issue with my React/Material UI Dialog box being used to gather date information form a user. Right now I have 2 layers of dialog layered over each other in the input box. When clicking either of the input boxes the issue resolves itself and everything looks good, but in the first state it looks broken. Any advice would be appreciated. Thanks!
[![enter image description here][1]][1]
import React, { useState } from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
const DownloadDialog = () => {
const [openDialog, setOpenDialog] = useState(false);
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const handleOpenDialog = () => {
setOpenDialog(true);
};
const handleCloseDialog = () => {
setOpenDialog(false);
};
const handleDownloadCSV = () => {
// Perform download logic using startDate and endDate values
console.log('Download CSV');
console.log('Start Date:', startDate);
console.log('End Date:', endDate);
// Close the dialog
handleCloseDialog();
};
const handleStartDateChange = (event) => {
setStartDate(event.target.value);
};
const handleEndDateChange = (event) => {
setEndDate(event.target.value);
};
return (
<>
<Button color="inherit" onClick={handleOpenDialog}>
Download CSV
</Button>
<Dialog open={openDialog} onClose={handleCloseDialog}>
<DialogTitle>Download CSV</DialogTitle>
<DialogContent>
<DialogContentText>
Please enter the date range for the CSV file.
</DialogContentText>
<TextField
autoFocus
margin="dense"
label="Start Date"
type="date"
value={startDate}
onChange={handleStartDateChange}
fullWidth
/>
<TextField
margin="dense"
label="End Date"
type="date"
value={endDate}
onChange={handleEndDateChange}
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>Cancel</Button>
<Button onClick={handleDownloadCSV}>Download</Button>
</DialogActions>
</Dialog>
</>
);
};
export default DownloadDialog;
[1]: https://i.stack.imgur.com/jJvDJ.png
</details>
# 答案1
**得分**: 1
不太了解MUI，但我觉得MUI的`type="date"`的`inputs`不是为`labels`设计的。
我看到有两个选项...
**选项1)** 您可以省略`label`属性，然后用`placeholder`属性替代。
```jsx
<TextField
autoFocus
margin="dense"
placeholder="开始日期"
type="date"
value={startDate}
onChange={handleStartDateChange}
fullWidth
/>
选项2) (这个选项提供了所需的结果) 在他们的文档中，我看到了一个可以使用的日期选择器组件。不过它会增加一些包大小：
步骤1 - 运行以下命令：
npm install @mui/x-date-pickers
npm install moment
步骤2 - 复制/粘贴以下代码：
import { useState } from 'react';
import Button from '@mui/material/Button';
import { Box } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
const DownloadDialog = () => {
const [openDialog, setOpenDialog] = useState(false);
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const handleOpenDialog = () => {
setOpenDialog(true);
};
const handleCloseDialog = () => {
setOpenDialog(false);
};
const handleDownloadCSV = () => {
// 执行使用 startDate 和 endDate 值的下载逻辑
console.log('下载CSV');
console.log('开始日期:', startDate);
console.log('结束日期:', endDate);
// 关闭对话框
handleCloseDialog();
};
return (
<>
<Button color="inherit" onClick={handleOpenDialog}>
下载CSV
</Button>
<Dialog open={openDialog} onClose={handleCloseDialog}>
<DialogTitle>下载CSV</DialogTitle>
<DialogContent>
<DialogContentText>
请为CSV文件输入日期范围。
</DialogContentText>
<LocalizationProvider dateAdapter={AdapterMoment}>
<Box
display="flex"
flexDirection="column"
gap={2}
>
<DatePicker label="开始日期" value={startDate} onChange={setStartDate} />
<DatePicker label="结束日期" value={endDate} onChange={setEndDate} />
</Box>
</LocalizationProvider>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>取消</Button>
<Button onClick={handleDownloadCSV}>下载</Button>
</DialogActions>
</Dialog>
</>
);
};
export default DownloadDialog;
这与您的代码不同：
<LocalizationProvider dateAdapter={AdapterMoment}>
<Box
display="flex"
flexDirection="column"
gap={2}
>
<DatePicker label="开始日期" value={startDate} onChange={setStartDate} />
<DatePicker label="结束日期" value={endDate} onChange={setEndDate} />
</Box>
</LocalizationProvider>
英文:
Don't know much about MUI, but it looks to me like the inputs of type="date" of MUI are not designed for a labels.
I see two options...
Option 1) You omit the label prop and replace it with a placeholder prop.
<TextField
autoFocus
margin="dense"
placeholder="Start Date"
type="date"
value={startDate}
onChange={handleStartDateChange}
fullWidth
/>
Option 2) (this option provides the desired result) In their docs I saw a date picker component you could use. It adds a bit more size to your bundle though:
Step 1 - Run those scripts:
npm install @mui/x-date-pickers
npm install moment
Step 2 - Copy/Paste this:
import { useState } from 'react';
import Button from '@mui/material/Button';
import { Box } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
const DownloadDialog = () => {
const [openDialog, setOpenDialog] = useState(false);
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const handleOpenDialog = () => {
setOpenDialog(true);
};
const handleCloseDialog = () => {
setOpenDialog(false);
};
const handleDownloadCSV = () => {
// Perform download logic using startDate and endDate values
console.log('Download CSV');
console.log('Start Date:', startDate);
console.log('End Date:', endDate);
// Close the dialog
handleCloseDialog();
};
return (
<>
<Button color="inherit" onClick={handleOpenDialog}>
Download CSV
</Button>
<Dialog open={openDialog} onClose={handleCloseDialog}>
<DialogTitle>Download CSV</DialogTitle>
<DialogContent>
<DialogContentText>
Please enter the date range for the CSV file.
</DialogContentText>
<LocalizationProvider dateAdapter={AdapterMoment}>
<Box
display="flex"
flexDirection="column"
gap={2}
>
<DatePicker label="Start Date" value={startDate} onChange={setStartDate} />
<DatePicker label="End Date" value={endDate} onChange={setEndDate} />
</Box>
</LocalizationProvider>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>Cancel</Button>
<Button onClick={handleDownloadCSV}>Download</Button>
</DialogActions>
</Dialog>
</>
);
};
export default DownloadDialog;
This is different to your code:
<LocalizationProvider dateAdapter={AdapterMoment}>
<Box
display="flex"
flexDirection="column"
gap={2}
>
<DatePicker label="Start Date" value={startDate} onChange={setStartDate} />
<DatePicker label="End Date" value={endDate} onChange={setEndDate} />
</Box>
</LocalizationProvider>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论