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