How to disable specific dates in react Datepicker?

Is it possible to disable specific dates while selecting specific users in react Datepicker

4 Answers

You can use excludeDates for this. It's an array of Date objects:

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

I had the same issue and found the simplest solution is to use excludeDates and add addDays(new Date(), 5) <-- 5 being the date you want to exclude, to the array, then delete selectsRange:

... return ( <DatePicker selected={startDate} onChange={onChange} startDate={startDate} endDate={endDate} excludeDates={[addDays(new Date(), 1), addDays(new Date(), 5), addDays(new Date(), 7), addDays(new Date(), 12) ]} //selectsRange selectsDisabledDaysInRange inline /> );
};

Improving Mahesh Samudra's answer

While selecting specific users

I understand from that sentence that you want to disable specific dates for some users, like a role based access

Let's say you keep user data like that

user = { name: 'ABC', email: '[email protected]', role: 'Admin' //Admin, User, etc..
};

Then you can control your excludeDates property like so

excludeDates={user.role !== 'Admin' ? [new Date(), subDays(new Date(), 1)] : []}

UPDATEYou can get user data from your endpoint like that

useEffect(() => { apiEndpoint .then(result => setUser(result.data)) .catch(error => console.log(error))
}, [])

If you want to disable dates just use the react-day-picker library, you just have to pass an array of dates to disable to the disable props or pass an array of object containing the range to disable which is "from" and "to". i hope this answers your question

 `import {DayPicker} from "react-day-picker"; const disableDates= [new Date(2022/08/2),{from: new Date(2023/05/3),to:new Date(2023/05/8)] <DayPicker mode='single' selected={date} onSelect={onSelect} initialFocus disabled={disabledDates} />
`