英文:
Mui DatePicker v6: How to change default icon and its position through slots
问题
我需要这个：
而不是这个：
但现在日期选择器（@mui/x-date-pickers 6.x）已经切换到插槽，网络上几乎没有示例。
英文:
I need this:
instead of this:
But now the date picker(@mui/x-date-pickers 6.x) has switched to slots, and there are very few examples on the Web.
答案1
得分: 4
以下是翻译好的代码部分：
Codesandbox: https://codesandbox.io/s/mui-datepicker-change-icon-and-its-position-ylzn4n?file=/demo.tsx
为字段添加startAdornment的代码：
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import BugReportIcon from "@mui/icons-material/BugReport";
//...
<DatePicker
label="mui datapicker"
slotProps={{
textField: {
InputProps: { startAdornment: <BugReportIcon /> }
}
}}
/>
更改默认日期选择器图标的代码：
<DatePicker
slots={{
inputAdornment: BugReportIcon
}}
/>
更改图标及其位置的代码：
<DatePicker
slots={{
inputAdornment: BugReportIcon
}}
slotProps={{
inputAdornment: {
position: 'start'
}
}}
/>
英文:
Codesandbox: https://codesandbox.io/s/mui-datepicker-change-icon-and-its-position-ylzn4n?file=/demo.tsx
Code for adding startAdornment for your field:
import { DatePicker } from '@mui/x-date-pickers/DatePicker'
import BugReportIcon from "@mui/icons-material/BugReport";
//...
<DatePicker
label="mui datapicker"
slotProps={{
textField: {
InputProps: { startAdornment: <BugReportIcon /> }
}
}}
/>
Code for changing the default date picker icon:
<DatePicker
slots={{
inputAdornment: BugReportIcon
}}
/>
Code for change icon and its position:
<DatePicker
slots={{
inputAdornment: BugReportIcon
}}
slotProps={{
inputAdornment: {
position: 'start'
}
}}
/>
答案2
得分: 0
以下是翻译好的部分：
以下对我有用：
const [open, setOpen] = React.useState(false);
const getInputAdornment = () => {
return (
<InputAdornment position="start">
<IconButton onClick={() => setOpen(true)}>
<BugReportIcon />
</IconButton>
</InputAdornment>
);
};
<DatePicker
onClose={() => setOpen(false)}
open={open}
slots={{ inputAdornment: getInputAdornment }}
/>
英文:
the following worked for me:
const [open, setOpen] = React.useState(false);
const getInputAdornment = () => {
return (
<InputAdornment position="start">
<IconButton onClick={() => setOpen(true)}>
<BugReportIcon />
</IconButton>
</InputAdornment>
);
};
<DatePicker
onClose={() => setOpen(false)}
open={open}
slots={{ inputAdornment: getInputAdornment }}
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论