-1

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"
                                   />
Ethan
  • 1
  • 1
  • 5
  • Does this answer your question? [How to disable specific dates in react Datepicker?](https://stackoverflow.com/questions/73706797/how-to-disable-specific-dates-in-react-datepicker) – Terry Sep 30 '22 at 11:26

2 Answers2

0

You can use ExcludeDate props in react-date picker..

 <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      // exclude the listed dates 
      excludeDates={[newDate('2022-09-27')]}
    />
sms
  • 1,380
  • 1
  • 3
  • 5
  • i have stored the response in usestate as const [inValidDate, setInvalidDate] = useState(null); I tried to pass inValidDate in excludeates as excludeDates={[new Date(inValidDate)]} but still it didnt work – Ethan Sep 19 '22 at 06:34
  • if invalidDate is a dateString or array of dateStrings.. – sms Sep 19 '22 at 12:27
0

You need to use the ExcludeDates property, docs.

The example in the docs:

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      excludeDates={[new Date(), subDays(new Date(), 1)]}
      placeholderText="Select a date other than today or yesterday"
    />
  );
};

excludeDates takes an array of dates. You would need to convert each of string dates, e.g., form ''2022-09-27'' to new Date('2022-09-27').

Ollie
  • 61
  • 10