react日历组件

一、简单版

效果图如下

代码如下

import React from "react";
import DatePicker from "react-datepicker";
 
import "react-datepicker/dist/react-datepicker.css";
 
class Example 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 (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }
}

只需要npm一个就行

npm install react-datepicker --save

二、专门用来获取一个select data

import React, { Component } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker';
class App extends Component {
  state = {
    date: [new Date(), new Date()]
  }
  onChange = date => this.setState({ date })
  render() {
    return (
      <div>
        <DateRangePicker
          onChange={this.onChange}
          value={this.state.date}
          isOpen={true}
        />
      </div>
    );
  }
}
export default App;

注意：出现报错

解决办法：react和react-dom 都升级到16.7.0

npm install react-dom@16.7.0
npm install react@16.7.0