react-calendar 日历，react-daterange-picker选取时间段

冷不防 2022-04-23 01:00 658阅读 0赞

*  react-calendar

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

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

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

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

.react-calendar\_\_tile--active当前选择的单元格className

.react-calendar\_\_tile--hasActive当前日期的单元格className

来一个实际例子展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

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][https_github.com_wojtekmaj_react-daterange-picker]

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

注意：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可以获取翻页的时间

[https_www.npmjs.com_package_react-calendar]: https://www.npmjs.com/package/react-calendar
[https_github.com_wojtekmaj_react-calendar]: https://github.com/wojtekmaj/react-calendar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220323/5f81e59f4bc04209b2e6998f9e404b8f.png
[https_github.com_wojtekmaj_react-daterange-picker]: https://github.com/wojtekmaj/react-daterange-picker
[default Calendar styles]: https://github.com/wojtekmaj/react-calendar/blob/master/src/Calendar.less