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.
JavaScript
x
22
22
1
<DatePicker
2
value={fromDate}
3
label="From Date"
4
color="primary"
5
inputFormat="DD/MM/YYYY"
6
onChange={(fromDateValue) =>
7
setFromDate(moment(fromDateValue).format('DD-MMM-YYYY', moment.ISO_8601))
8
}
9
renderInput={(params) => <TextField {params} size="small" margin="dense" sx={{ width: 238 }} />}
10
/>
11
12
<DatePicker
13
value={toDate}
14
label="To Date"
15
color="primary"
16
inputFormat="DD/MM/YYYY"
17
onChange={(toDateValue) => setToDate(moment(toDateValue).format('DD-MMM-YYYY', moment.ISO_8601))}
18
renderInput={(params) => (
19
<TextField {params} size="small" margin="dense" sx={{ width: 218 }} color="primary" />
20
)}
21
/>
22
Advertisement
Answer
You can use the minDate
prop:
Min selectable date.
You can add it to your second DatePicker
, like:
JavaScript
1
2
1
minDate={fromDate}
2