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

Question

In my component I have two DatePickers from MUI. I need to set that in second DatePicker minDate cannot be smaller than date picked in first DatePicker. Can You please suggest how I should code it ? Below You can see how the implementation looks like:

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>
);
};

thanks !

Answer 1

You can add minDate field to your second DatePicker and set it to date picked in first DatePicker.

minDate={firstDateValue}