How to disable specific dates in react Datepicker?

Viewed 57

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

2 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"
/>

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: 'abc@abc.com',
  role: 'Admin' //Admin, User, etc..
};

Then you can control your excludeDates property like so

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

UPDATE You can get user data from your endpoint like that

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