使用 @material-ui/pickers DatePicker 显示并允许选择月外日期答案

【问题标题】：Show and allow selecting dates outside of month with @material-ui/pickers DatePicker使用 @material-ui/pickers DatePicker 显示并允许选择月外日期
【发布时间】：2020-12-09 02:29:02
【问题描述】：

我目前正在处理一个 React 项目，其中首选是使用来自 @material-ui/pickers 的 DatePicker。

正如标题所说，其中一个要求是还显示当月以外的日期，以及 - 如果它们没有被禁用 - 允许用户选择那些日子，所以他们不必先点击更改月份，然后选择日期。

到目前为止，我可以看到允许在当月之外显示日期的唯一方法是为我自己的 renderDay 函数提供自定义样式。

const styles = createStyles(theme => ({
    dayDisabled: {
        color: "rgba(255, 255, 255, 0.5)",
        pointerEvents: "none"
    },
    nonCurrentMonthDay: {
        color: theme.palette.text.disabled,
    },
    highlightNonCurrentMonthDay: {
        color: '#676767',
    },
    highlight: {
        background: theme.palette.primary.main,
        color: theme.palette.common.black,
        '&:hover':{
            background: theme.palette.primary.main,
        }
    }
}));

    renderWrappedWeekDay = (date, selectedDate, dayInCurrentMonth) => {
        const { classes } = this.props;
        const isSelectedDay = isSameDay(date, selectedDate);

        const dayClassName = clsx(classes.day, {
            [classes.nonCurrentMonthDay]: !dayInCurrentMonth,
            [classes.highlightNonCurrentMonthDay]: !dayInCurrentMonth,
            [classes.highlight]: isSelectedDay,
            [classes.dayDisabled]: el.props.disabled
        });

        return (
                <IconButton className={dayClassName}>
                    <span> {format(date, "d")} </span>
                </IconButton>
        );
    };

但是当单击当前月份日期之外的任何日期时，我无法确定触发 onChange 事件的任何方法。

由于我在材料 UI 选择器方面没有太多深入的经验，因此任何人都可以建议是否可以实现所需的功能？如果是，如何最好地做到这一点？

【问题讨论】：

标签： javascript reactjs datepicker material-ui

【解决方案1】：

我遇到了这个确切的问题，我们需要做的是覆盖点击自定义日期，使用 React.useState 更改选定的日期，如下所示：

    const [selectedDate, handleDateChange] = useState(moment());


      renderWrappedWeekDay = (date, _ , dayInCurrentMonth) => {
        const { classes } = this.props;
        const isSelectedDay = isSameDay(date, selectedDate);

        const dayClassName = clsx(classes.day, {
            [classes.nonCurrentMonthDay]: !dayInCurrentMonth,
            [classes.highlightNonCurrentMonthDay]: !dayInCurrentMonth,
            [classes.highlight]: isSelectedDay,
            [classes.dayDisabled]: el.props.disabled
        });

        return (
                <IconButton className={dayClassName} onClick={(e) => {
                e.stopPropagation() // stop the propagation
                if (dayIsBetween) // use your own logic to limit selectable days
                    handleDateChange(date) // now, set state of the new selected date
                }}

                >
                    <span> {format(date, "d")} </span>
                </IconButton>
        );
    };

日期选择器的值应该是状态，在本例中为 selectedDate

                                        <DatePicker

                                            variant="static"
                                            labelFunc={date => (date ? date.format("YYYY/MM/DD") : "")}
                                            value={selectedDate}
                                           
                                            renderDay={renderWrappedWeekDay}
                                            onChange={(e) => { }} // you need to override onChange otherwise you might see onChange not defined error

                                            minDate={today}
                                            maxDate={endDate}
                                        />

【讨论】：