How to disable certain dates in reactdatepicker on a json array?

Viewed 19

I have an API endpoint that returns a JSON response of invalid dates that should be disabled in the react date picker.For example i got the response from api as ['2022-09-27', '2022-09-26', '2022-09-29', '2022-09-28', '2022-10-01', '2022-10-02', '2022-10-03']

const [inValidDate, setInvalidDate] = useState([]);
    
    useEffect(() => {
        const getInvalidDate =async()=>{
            await UserServices.invalidDatesApi(headers,MeetDetails.assign_to)
           .then((res)=>{     
             setInvalidDate(res.data.invalid_dates);
           }) 
        }
        getInvalidDate()
      }, [assignToName]);

const customDates = {inValidDate}
    
     <DatePicker
                              id="DatePicker"
                              name="date"
                              dateFormat="MM/dd/yyyy"
                              onChange={(date) => handleChangeDate(date)}
                              placeholderText="Meet Date*"
                              minDate={new Date()}
                              excludeDates={[new Date(customDates)]}
                              className="h-auto form-control form-control-lg"
                                   />
0 Answers
Related