Interaction with disabled days
As disabled days won’t stop the onDayClick
event to be fired. here we check if the clicked day has a disabled
modifier to prevent the day to be added to the selected days.
Code
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.handleDayClick = this.handleDayClick.bind(this);
this.state = {
selectedDay: undefined,
};
}
handleDayClick(day, modifiers = {}) {
if (modifiers.disabled) {
return;
}
this.setState({
selectedDay: modifiers.selected ? undefined : day,
});
}
render() {
const disabledDays = {
daysOfWeek: [0, 6],
};
return (
<div>
<DayPicker
showOutsideDays
selectedDays={this.state.selectedDay}
disabledDays={disabledDays}
onDayClick={this.handleDayClick}
/>
<div>
{this.state.selectedDay
? this.state.selectedDay.toLocaleDateString()
: 'Please select a day.'}
</div>
</div>
);
}
}
Result
March 2021
Su
Mo
Tu
We
Th
Fr
Sa
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Please select a day.