英文:
reactjs: MUI5 : MobileDateTimePicker API: How to customize the text in the calendar
问题
我正在使用 "@mui/x-date-pickers": "^6.9.2", 来显示日期时间选择器。
现在我想对弹出窗口进行一些样式更改，以帮助选择日期和时间。
如何做到这一点？
我尝试过：
<MobileDateTimePicker
label="End DateTime"
inputRef={ref}
minDate={subDays(new Date(), 90)}
disableFuture
{...field}
sx={{
"& .MuiPickersToolbarText-root.Mui-selected": {
color: "#fff",
backgroundColor: "#e91e63",
fontWeight: "600",
WebkitTransition:
"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
borderRadius: "50%",
fontSize: "0.75rem",
width: "36px",
height: "36px",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
},
"& .MuiDateTimePickerToolbar-separator": {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
},
}}
/>
但它不能对对话框进行任何更改。
我使用以下内容，它解决了我不允许打开年份和月份视图的目的，但我面临另一个问题：
views={["day", "hours", "minutes"]}
我希望日期时间完全显示在框中，就像这样：
英文:
I am using "@mui/x-date-pickers": "^6.9.2", for the showing datetime picket
Now i want to do some styling chages to the popup which helps to select date and time.
How can i do it
I tried
<MobileDateTimePicker
label="End DateTime"
inputRef={ref}
minDate={subDays(new Date(), 90)}
disableFuture
{...field}
sx={{
"& .MuiPickersToolbarText-root.Mui-selected": {
color: "#fff",
backgroundColor: "#e91e63",
fontWeight: "600",
WebkitTransition:
"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
borderRadius: "50%",
fontSize: "0.75rem",
width: "36px",
height: "36px",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
},
"& .MuiDateTimePickerToolbar-separator": {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
},
}}
/>
But its not able to do any changes to the dialog open
EDIT
I am using the below and it solves my purpose of not allowing to open years and months view buti am facing another thing
views={["day", "hours", "minutes"]}
I want to full date time in the box just as
答案1
得分: 0
你可以使用MobileDateTimePicker的slotProps属性。
同时，您还可以使用minDate和maxDate属性来阻止点击月份或年份。
例如：
<MobileDateTimePicker
defaultValue={dayjs("2022-04-17T15:30")}
minDate={dayjs("2022-04-01")}
maxDate={dayjs("2022-04-30")}
views={["month", "day"]}
format="YYYY-MM-DD"
slotProps={{
toolbar: {
sx: {
"& .MuiPickersToolbarText-root": {
color: "red"
}
}
},
day: {
sx: {
color: "red"
}
}
}}
/>
英文:
You can use slotProps property of MobileDateTimePicker.
And you can also use minDate and maxDate props to block clicking on months or years.
For example:
<MobileDateTimePicker
defaultValue={dayjs("2022-04-17T15:30")}
minDate={dayjs("2022-04-01")}
maxDate={dayjs("2022-04-30")}
views={["month", "day"]}
format="YYYY-MM-DD"
slotProps={{
toolbar: {
sx: {
"& .MuiPickersToolbarText-root": {
color: "red"
}
}
},
day: {
sx: {
color: "red"
}
}
}}
/>
答案2
得分: -1
因为DOM中具有类名MuiPickersToolbarText-root和MuiDateTimePickerToolbar-separator的元素不是从MobileDateTimePicker嵌套的，所以无法启用更改，它们位于一个门户对话框中。
您可以这样做：
<MobileDateTimePicker
{...your props}
slotProps={{
toolbar: {
sx: {
// 在这里使用 sx
}
}
}}
/>
来源：
Material UI 文档：
https://mui.com/x/api/date-pickers/mobile-date-time-picker/
英文:
Changes are not enabled because elements with classes MuiPickersToolbarText-root and MuiDateTimePickerToolbar-separator are not nested from MobileDateTimePicker in the DOM, they are in a portal dialog.
You can do:
<MobileDateTimePicker
{...your props}
slotProps={{
toolbar: {
sx: {
// You sx here
}
}
}}
/>
Source:
Material UI Documentation:
https://mui.com/x/api/date-pickers/mobile-date-time-picker/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论