• react-calendar

相比较之前写过的antd-calendar，antd-calendar样式已经封装好了，但是属性比较少，不适合比较复杂的日历显示

react-calendar属性比较多，比较推荐应用于复杂的页面，比如titleClassName这个属性，可以实现对每一个日历单元格进行样式管理

想要查看react-calendar属性，链接：https://www.npmjs.com/package/react-calendar

想要查看react-calendar属性具体使用：链接https://github.com/wojtekmaj/react-calendarsample和test文件夹下的例子

.react-calendar__tile--active当前选择的单元格className

.react-calendar__tile--hasActive当前日期的单元格className

来一个实际例子展示：

App.js

import React, { Component } from "react";
import Calendar from "react-calendar";
import './App.css'
import moment from "moment";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: "",
      index: 0,
      date: new Date()
    };
  }
  onChange = date => {
    this.state.date = date;
    this.setState({ date });
    let timeValue =
      this.state.date && moment(this.state.date).format("YYYY-MM-DD");
    console.log(timeValue);
  };
  render() {
    const tileClassName = ({ date, view }) => {
      let getDate = moment(date).format("YYYY-MM-DD");
      console.log(getDate === '2019-01-07')
      if (getDate === '2019-01-07') {
        return "twoimage";
      } else if (getDate === '2019-01-19') {
        return "oneimage";
      }
      return null;
    }
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
          tileClassName={tileClassName}
          minDetail="month"
          locale="en"
        />
        <div className="ico1box">
          <div className="ico1" />
          <div className="ico1text">
            备注1.
          </div>
        </div>
        <div className="ico1box">
          <div className="ico2" />
          <div className="ico2text">
            备注2.
          </div>
        </div>
        <div className="ico1box">
          <div className="ico3" />
          <div className="ico3text">Today.</div>
        </div>
      </div>
    );
  }
}
export default App;

App.css

.swiper-container {
  width: 100%;
  height: auto;
}
.swiper-slide {
  width: auto;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  background: #fff;
}
.clearboth{clear: both;}
.imgbox{float: left;overflow: hidden;}
.imgstyle{width: 96%;}
.timep{text-align: left;}
.closebutton{
  appearance: none;
  border: none;
  background: #FFD800;
  border-radius: 4px;
  text-transform: uppercase;
  box-sizing: border-box;
  padding: 4px 8px;
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}
.twoimage{background-color: #dab4fd!important;}
.oneimage{background-color: #fdf136!important;}
.ico1{width: 10px;height: 10px;border-radius: 50%;background-color: #dab4fd;top:50%;margin-top:-5px;position: absolute}
.ico1text{margin-left: 20px;;line-height: 25px;}
.ico1box{width: 100%;height: 25px;position: relative;width: 70%;margin: 0 auto;margin-top: 10px;text-align: left;}
.ico2{width: 10px;height: 10px;border-radius: 50%;background-color: #fdf136;top:50%;margin-top:-5px;position: absolute}
.ico2text{margin-left: 20px;;line-height: 25px;}
.ico3{width: 10px;height: 10px;border-radius: 50%;background-color: #1087ff;top:50%;margin-top:-5px;position: absolute}
.ico3text{margin-left: 20px;;line-height: 25px;}

• react-daterange-picker

react实现选取一个时间段，上面react-calendar有的属性它也都有

学习地址https://github.com/wojtekmaj/react-daterange-picker

React-DateRange-Picker uses React-Calendar under the hood. Here are the default Calendar stylesthat you can overwrite if you need it：https://github.com/wojtekmaj/react-calendar/blob/master/src/Calendar.less

注意：react和react-dom必须是16.7.0版本，不能是老版本

npm ls react ,npm ls react-dom查看一下你的react,react-dom版本,把react和react-dom 都升级到16.7.0，把react和react-dom 都升级到16.7.0

npm install --save react@16.7.0

npm install --react-dom@16.7.0

npm install -- save react@latest   下载组件最新版本

代码

import React, { Component } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker';
class App extends Component {
  state = {
    date: [new Date(), new Date()]
  }
  turnChange = ({ activeStartDate, view }) => {
    const { changeCalendarData } = this.props;
    console.log("turnChange: ");
    let StartDate = moment(activeStartDate)
      .add(-6, "days")
      .format("YYYY-MM-DD");
    let EndDate = moment(activeStartDate)
      .add(35, "days")
      .format("YYYY-MM-DD");
    changeCalendarData(this.state.userId, StartDate, EndDate);
    console.log("startDate", this.state.startDate);
    console.log("activeMonth", this.state.activeMonth);
    console.log("activeYear", this.state.activeYear);
  };
  onChange = date => this.setState({ date })
  render() {
    console.log(this.state.date);
    return (
      <div>
        <DateRangePicker
          onChange={this.onChange}
          value={this.state.date}
          isOpen={true}
          onActiveDateChange={this.turnChange}
        />
      </div>
    );
  }
}
export default App;

• 注意：onActiveDateChange可以获取翻页的时间