Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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 !

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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

minDate={firstDateValue}

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading