Save selected days in state
This example shows how to use the component’s state and selectedDays
to select days when the user interacts with the calendar.
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: null,
};
}
handleDayClick(day, { selected }) {
this.setState({
selectedDay: selected ? undefined : day,
});
}
render() {
return (
<div>
<DayPicker
selectedDays={this.state.selectedDay}
onDayClick={this.handleDayClick}
/>
<p>
{this.state.selectedDay
? this.state.selectedDay.toLocaleDateString()
: 'Please select a day 👻'}
</p>
</div>
);
}
}
Result
March 2021
Su
Mo
Tu
We
Th
Fr
Sa
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
Please select a day 👻