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.

  • What is the condition to disable the dates? do you want to disable the next 15 days based on current date? – Ganesh Sanap Oct 26 '20 at 10:19

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.


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

  • 1
    Thanks for the help. It sure helped me a lot and helped also in blocking specific dates – Dhanjay Bhardwaj Oct 27 '20 at 5:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.