如何将 maxDate 设置为小于 MUI 中另一个 DatePicker 中选择的日期

Question

在我的组件中，我有两个来自 MUI 的 DatePickers。我需要在第二个 DatePicker 中设置 minDate 不能小于在第一个 DatePicker 中选择的日期。你能建议我应该如何编码吗？下面您可以看到实现的样子：

export const DateRangeColumnFilter: FC<ColumnProps> = ({
    column: { filterValue = [], setFilter, Header },
}) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const handleClick = (event: any) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    const { useTranslationFunc } = useTranslationFacade();
    const theme = useTheme();
    const setColor = (
        value: boolean,
        firstColor: PaletteColor,
        secondColor: PaletteColor
    ) => (value ? firstColor : secondColor).toString();

    return (
<StyledContainerDiv>
                    <LocalizationProvider
                        dateAdapter={AdapterDateFns}
                        locale={getCurrentLocale()}
                    >
                        <Stack spacing={3}>
                            <DatePicker
                                label={useTranslationFunc('Od')}
                                value={filterValue[0] || null}
                                mask="____-__-__"
                                inputFormat="yyyy-MM-dd"
                                onChange={(newValue) => {
                                    setFilter((old = []) => [
                                        newValue ? newValue : null,
                                        old[1],
                                    ]);
                                }}
                                renderInput={(params) => (
                                    <TextField {...params} />
                                )}
                                maxDate={new Date()}
                            />
                            <DatePicker
                                label={useTranslationFunc('Do')}
                                value={filterValue[1] || null}
                                mask="____-__-__"
                                inputFormat="yyyy-MM-dd"
                                onChange={(newValue) => {
                                    setFilter((old = []) => [
                                        old[0],
                                        newValue ? newValue : null,
                                    ]);
                                }}
                                renderInput={(params) => (
                                    <TextField {...params} />
                                )}
                            />
                        </Stack>
                    </LocalizationProvider>
                </StyledContainerDiv>
);
};

谢谢！

Answer 1

您可以将 minDate 字段添加到第二个 DatePicker 并将其设置为在第一个 DatePicker 中选择的日期。

minDate={firstDateValue}

如何将 maxDate 设置为小于 MUI 中另一个 DatePicker 中选择的日期

How to set maxDate to be smaller than picked date in another DatePicker in MUI

reactjs

material-ui