阻止突出显示react-date-picker中的Today
阻止突出显示react-date-picker中的Today
提问于 2021-01-15 04:55:45
找不到任何与此问题相关的内容。我从其他关于react-date-picker的问题中了解到，默认情况下不选择今天的值是可能的，这很好，而且主要是我想要的，但我甚至想要阻止react-date-picker在今天突出显示。它看起来太像用户已经选择了一个日期，但是当今天没有可用的约会时，我不仅想让它像其他日期一样变灰，而且实际上根本不想突出显示它。我仍然希望在选择其他日期时突出显示它们，所以我不想从CSS中删除突出显示类，但是不应该突出显示无效的日期，即使是今天，因为在这种情况下今天没有约会，所以没有选择日期。
当前代码为：
<ReactDatePicker
inline
minDate={new Date()}
selected={chosenDay ? new Date(chosenDay) : null}
value={null}
filterDate={(date) => isDayAvailable(date, timeSlots)}
onChange={(date) => chooseDay(date)}
/>回答 2
Stack Overflow用户
发布于 2021-01-15 08:50:12
我曾经发现react日历的一组MUTheme属性，请在这段代码中检查它们并尝试一下，我不确定，但我认为它是“当前的”。
import DateFnsUtils from "@date-io/date-fns";
import {DatePicker, MuiPickersUtilsProvider} from "@material-ui/pickers";
import React from "react";
import styles from "./Calendar.module.scss";
import Box from "@material-ui/core/Box";
import {createMuiTheme, MuiThemeProvider} from "@material-ui/core/styles";
import {black, white} from "material-ui/styles/colors";
export default function Calendar(props) {
const materialTheme = createMuiTheme({
palette: {
primary: {
main: '#3E3F42'
}
},
overrides: {
MuiPickersCalendarHeader: {
switchHeader: {
backgroundColor: '#303235',
color: white,
},
iconButton: {
backgroundColor: "transparent",
color: white
},
dayLabel: {
color: white //days in calendar
},
transitionContainer: {
color: white
}
},
MuiPickersBasePicker: {
pickerView: {
backgroundColor: '#3E3F42'
}
},
MuiPickersDay: {
day: {
color: white //days in calendar
},
daySelected: {
backgroundColor: '#FFC561', //calendar circle
color: black
},
current: {
backgroundColor: '#736F69',
color: white
},
},
MuiDialogActions: {
root: {
backgroundColor: '#3E3F42'
}
}
}
});
const isOpened = props.isOpened;
const topPosition = props.topPosition;
const selectedDate = props.selectedDate;
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
async function handleDateChange(date1) {
props.onChange(date1);
await sleep(700);
props.setDDOpen(false);
}
return isOpened ? (
<Box pad={{ vertical: 'small'}} className={styles.smallCard} style={{top: topPosition}}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<MuiThemeProvider theme={materialTheme}>
<DatePicker
disableToolbar
variant="static"
value={selectedDate}
onChange={handleDateChange}
/>
</MuiThemeProvider>
</MuiPickersUtilsProvider>
</Box>): null
}
Stack Overflow用户
发布于 2021-06-29 06:51:51
我不认为对此有特定的支持/配置，但是你可以尝试覆盖/删除CSS选择器CalendarDay__today中的样式，当你检查页面时，你可以看到它控制着“今天”的样式。
另一个突出显示来自其他选择器，如CalendarDay__highlighted_calendar，也可以使用CSS覆盖进行自定义。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65726792
复制相关文章
相似问题
腾讯云开发者
