How can I set Minimum Date, so the user can’t pick To Date that is before From Date.
Here is my Two Date Pickers, using moment to format the date.
<DatePicker
value={fromDate}
label="From Date"
color="primary"
inputFormat="DD/MM/YYYY"
onChange={(fromDateValue) =>
setFromDate(moment(fromDateValue).format('DD-MMM-YYYY', moment.ISO_8601))
}
renderInput={(params) => <TextField {...params} size="small" margin="dense" sx={{ width: 238 }} />}
/>
<DatePicker
value={toDate}
label="To Date"
color="primary"
inputFormat="DD/MM/YYYY"
onChange={(toDateValue) => setToDate(moment(toDateValue).format('DD-MMM-YYYY', moment.ISO_8601))}
renderInput={(params) => (
<TextField {...params} size="small" margin="dense" sx={{ width: 218 }} color="primary" />
)}
/>
Advertisement
Answer
You can use the minDate prop:
Min selectable date.
You can add it to your second DatePicker, like:
minDate={fromDate}