Get started with react-day-picker CDN
MIT licensed
React-Day-Picker is a popular React library for building custom date pickers.
Tags:- react
- react-component
- component
- calendar
- date-picker
- datepicker
- date
- picker
- moment
- momentjs
Stable version
Copied!
How to start using react-day-picker CDN
import React from 'react';
import 'react-day-picker/dist/style.css'; // Import the CSS file for styling
class Calendar extends React.Component {
state = {
selectedDates: new Set(),
};
handleDateChange = (selectedDates) => {
this.setState({ selectedDates });
};
render() {
return (
<div>
<h1>Selected Dates:</h1>
<ul>
{Array.from(this.state.selectedDates).map((date) => (
<li key={date.toISOString()}>{new Date(date).toLocaleDateString()}</li>
))}
</ul>
<div>
<p>Select some dates:</p>
<input
type="text"
readOnly
value={this.state.selectedDates.size > 0 ? this.formatDates(this.state.selectedDates) : 'No dates selected'}
/>
<br />
<ReactDayPicker
mode="multiple"
selectedDates={Array.from(this.state.selectedDates)}
onDateChange={this.handleDateChange}
/>
</div>
</div>
);
}
formatDates = (dates) => {
return dates.map((date) => new Date(date).toLocaleDateString()).join(', ');
};
render() {
return <div>{this.render()}</div>;
}
}
export default Calendar;
All versions
7.4.10
7.4.9
8.0.0
8.0.0-alpha.35
8.0.0-alpha.36
8.0.0-alpha.37
8.0.0-alpha.38
8.0.0-alpha.39
8.0.0-alpha.40
8.0.0-alpha.41
8.0.0-alpha.42
8.0.0-alpha.43
8.0.0-alpha.45
8.0.0-beta.1
8.0.0-beta.10
8.0.0-beta.11
8.0.0-beta.12
8.0.0-beta.13
8.0.0-beta.15
8.0.0-beta.16
8.0.0-beta.17
8.0.0-beta.18
8.0.0-beta.19
8.0.0-beta.26
8.0.0-beta.27
8.0.0-beta.29
8.0.0-beta.3
8.0.0-beta.30
8.0.0-beta.31
8.0.0-beta.32
8.0.0-beta.33
8.0.0-beta.35
8.0.0-beta.36
8.0.0-beta.37
8.0.0-beta.38
8.0.0-beta.39
8.0.0-beta.40
8.0.0-beta.41
8.0.0-beta.5
8.0.0-beta.7
8.0.0-beta.9
8.0.0-rc.0
8.0.1
8.0.2
8.0.3
8.0.4
8.0.5
8.0.6
8.0.7
8.1.0
8.1.1
8.1.2
8.1.3
8.1.4
8.10.0
8.10.1
8.2.0
8.2.1
8.3.0
8.3.1
8.3.2
8.3.3
8.3.4
8.3.5
8.3.6
8.3.7
8.4.0
8.4.1
8.5.0
8.5.1
8.6.0
8.7.0
8.7.1
8.8.0
8.8.1
8.8.2
8.9.0
8.9.1
9.0.0
9.0.0-beta.1
9.0.0-beta.2
9.0.0-beta.3
9.0.0-beta.4
9.0.0-beta.5
9.0.0-rc.1
9.0.0-rc.2
9.0.0-rc.3
9.0.0-rc.4
9.0.0-rc.5
9.0.0-rc.6
9.0.1
9.0.2
9.0.3
9.0.4
9.0.5
9.0.6
9.0.7
9.0.8
9.0.9
9.1.0
9.1.1
9.1.2
*** 9.1.3