Get started with react-datepicker CDN


import React from 'react';
import DatePicker from 'react-datepicker'; // Import the DatePicker component
import 'react-datepicker/dist/react-datepicker.css'; // Import the CSS for DatePicker

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({ startDate: date });
  }

  render() {
    return (
      <div>
        <h1>Select a date:</h1>
        <DatePicker
          value={this.state.startDate}
          onChange={this.handleChange}
        />
        <p>You picked: {this.state.startDate.toLocaleDateString()}</p>
      </div>
    );
  }
}

export default App;

https://cdn.cdnhub.io/react-datepicker/7.3.0/calendar.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/calendar_container.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/calendar_icon.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/date_utils.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/day.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/calendar.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/calendar_container.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/calendar_icon.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/date_utils.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/day.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/index.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/index.js Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/index.min.js Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/input_time.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/month.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/month_dropdown.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/month_dropdown_options.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/month_year_dropdown.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/month_year_dropdown_options.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/popper_component.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/portal.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/tab_loop.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/time.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/week.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/week_number.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/with_floating.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/year.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/year_dropdown.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/es/year_dropdown_options.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/index.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/index.js Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/index.min.js Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/input_time.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/month.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/month_dropdown.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/month_dropdown_options.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/month_year_dropdown.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/month_year_dropdown_options.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/popper_component.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/portal.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/react-datepicker-cssmodules.css Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/react-datepicker-cssmodules.min.css Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/react-datepicker.css Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/react-datepicker.js Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/react-datepicker.min.css Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/react-datepicker.min.js Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/react-datepicker.module.css Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/react-datepicker.module.min.css Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/tab_loop.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/time.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/week.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/week_number.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/with_floating.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/year.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/year_dropdown.d.ts Copied!

https://cdn.cdnhub.io/react-datepicker/7.3.0/year_dropdown_options.d.ts Copied!

Get started with react-datepicker CDN

Stable version

How to start using react-datepicker CDN

All versions