I want to disable MUI date picker future dates (only selected dates not all future dates)
I am getting array of dates from API which needs to be disabled from date picker.
Assume that below blackoutDates are what i am getting from API. So how to disable those dates?
Below is my code
const getDisabledDates = () => {
let blackoutDates = {[
"2022-03-01",
"2022-03-08"
"2022-04-13",
"2022-05-22"
]}
}
<DatePicker
disablePast
value={checkout.rideDate}
shouldDisableDate={getDisabledDates}
onChange={(newValue) => {
dispatch(setRideDate(newValue?.toISOString().split('T')[0]))
}}
renderInput={(params) => <TextField className={classes.datePickerStyle} {...params}/>}
/>
shouldDisableDate
is a function with the current date in param. So you need to compare this with your array, to enable / disable the date
const shouldDisableDate= date => {
let blackoutDates = {[
"2022-03-01",
"2022-03-08"
"2022-04-13",
"2022-05-22"
]}
return blackoutDates.includes(date);
}
This is an exemple, as your date
is of type Date
whereas your array contains strings. So you'll need to convert the date
to a YYYY-MM-DD
string first, using your prefered way:)
Handler prop shouldDisableDate
passes a date argument to the function you provide. So, your function could look like:
const getDisabledDates = (date) => {
let blackoutDates = [
"2022-03-01",
"2022-03-08"
"2022-04-13",
"2022-05-22"
];
// check `date` object against blackoutDates.
// return true | false
}
Keep in mind that the date parameter is a vanilla Date object. More info at MUI documentation . In the example, you can see how a function isWeekend
is passed to a prop shouldDisableDate
. According to date-fns documentation this function accepts the date object. I suggest You play around in the demo that MUI provides.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.