Disable dates for a selected range in React SharePoint SPFx [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for SharePoint Stack Exchange.

Closed 4 months ago.

Improve this question

I am new to React SharePoint Online SPFx and want to know how to disable dates in selected range in react-datetime. For now, I am using npm-reactdatetime and able to disable dates from current date.

Like if a person is ill in the calendar for like "30th Oct, 2020", he should not be able to select date from 30th Oct to Nov 14, 2020.

Answer 1

I am not sure about all of your requirements. But, Blocking some dates to be selected is possible while using react-datetime.

It is possible to disable dates in the calendar if the user are not allowed to select them, e.g. dates in the past. This is done using the prop isValidDate, which admits a function in the form function(currentDate, selectedDate) where both arguments are moment objects. The function shall return true for selectable dates, and false for disabled ones.

All you have to do is pass the isValidDate prop to react component, call function in this prop, write your business logic in function, and return true if you want to allow to select the date or false if you want to disable the date.

---

Example:

You can use below code to disable the weekends:

var valid = function( current ){
    return current.day() !== 0 && current.day() !== 6;
};

Use react component like:

<Datetime isValidDate={ valid } />

---

Reference: Blocking some dates to be selected