防止在 react-date-picker 中突出显示 Today

Posted 2023-05-07

【中文标题】防止在 react-date-picker 中突出显示 Today

【英文标题】：prevent highlighting of Today in react-date-picker

【发布时间】：2021-04-19 22:24:07

【问题描述】：

找不到与此问题特别相关的任何内容。我从有关 react-date-picker 的其他问题中发现，默认情况下可能没有选择今天的值，这很好，而且主要是我想要的，但我什至想阻止 react-date-从今天突出显示的选择器。看起来用户已经选择了一个日期，但是当今天没有可用的约会时，我不仅希望它像其他人一样变灰，而且实际上根本没有突出显示它。我仍然希望其他日子在被选中时突出显示，所以我不想从 CSS 中删除突出显示类，但是不应该突出显示无效的日期，即使是今天，因为今天没有约会这种情况下，所以没有选择日期。

当前代码是：

<ReactDatePicker
  inline
  minDate=new Date()
  selected=chosenDay ? new Date(chosenDay) : null
  value=null
  filterDate=(date) => isDayAvailable(date, timeSlots)
  onChange=(date) => chooseDay(date)
/>

【参考方案1】：

我曾经找到一组用于反应日历的 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

【参考方案2】：

我认为没有特定的道具/配置，但您可以尝试从 CSS 选择器 CalendarDay__today 覆盖/删除样式，当您检查页面时，您可以看到控制“今天”的样式.

另一个突出显示来自其他选择器，例如 CalendarDay__highlighted_calendar，也可以使用 CSS 覆盖进行自定义。