CODEWITHSUNDEEP
javascriptreactjs
Bahubali Ak
Bahubali Ak

Reputation: 246

How to disable list of dates in MUI date picker

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}/>}
/>

Upvotes: 1

Views: 3250

Answers (2)

dbuchet
dbuchet

Reputation: 1651

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 :)

Upvotes: 1

Žygimantas Augūnas
Žygimantas Augūnas

Reputation: 33

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.

Upvotes: 0

Related Questions