都0202年了，你还在用别人家的日历组件？

import React, {Component} from "react";
import {
  View,
  Text,
  Image,
  Button, IconSvg
} from "app/components";
import moment from "moment"; //引入时间模块
import y from "app/utils/yunfeiStyle"; //引入时间模块

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      allDayArr: [],
      taday: new Date().getDate(),        //今日
      lastMonth: [],
      nextMonth: [],
      years: new Date().getFullYear(),                      //年份
      month: new Date().getMonth() + 1,                      //月份
      today: moment(), //今天时间
      curMonth: props.defaultDate ? moment(props.defaultDate) : moment(), //显示的月份
      acDay: props.defaultDate ? moment(props.defaultDate) : moment() //记录用户点击选中的日期,用于显示选中效果
    };
  }

  /**
   * 上个月的数据
   */
  before() {
    const date = moment(this.state.curMonth).date(1);
    const count = date.day();
    date.subtract(count + 1, "day");
    let views = [] as any[];
    for (let i = 0; i < count; i++) {
      date.add(1, "day");
      views.push(
        <View key={i + "_before"} style={[y.wRatio(100 / 7), y.uac]}>
          <View
            style={[y.w(50), y.h(50), y.ujc, y.uac]}>
            <Text
              style={[y.color("#bebebe"), y.fSize(13)]}>{date.date()}</Text>
          </View>
        </View>
      );
    }
    return views;
  }

  /**
   * 下个月的数据
   */
  after() {
    //选中的时间改为1号,并且加上1个月
    const date = moment(this.state.curMonth).date(1).add(1, "months");
    const count = 7 - date.day();
    if (count === 7) {
      return null;
    }
    let views = [] as any[];
    for (let i = 0; i < count; i++) {
      views.push(
        <View key={i + "_after"} style={[y.wRatio(100 / 7), y.uac]}>
          <View
            style={[y.w(50), y.h(50), y.ujc, y.uac]}>
            <Text
              style={[y.color("#bebebe"), y.fSize(13)]}>{date.date()}</Text>
          </View>
        </View>
      );
      date.add(1, "day");
    }
    return views;
  }

  /**
   * 当前月的数据
   */
  thisM() {
    const date = moment(this.state.curMonth).date(1);
    const count = date.daysInMonth();//当前选中月份的总条数
    //最后一个工作日,本月1号,+1月-1天=本月最后一天
    let views = [] as any[];
    for (let i = 0; i < count; i++) {
      const todayMoment = moment(date);
      const isSame = this.state.acDay && todayMoment.isSame(this.state.acDay, "day");
      let disable = false;
      if (this.props.min && todayMoment.isBefore(this.props.min, "day")) {
        disable = true;
      }
      if (this.props.max && todayMoment.isAfter(this.props.max, "day")) {
        disable = true;
      }
      views.push(
        <Button
          key={i + "_this"}
          style={[y.wRatio(100 / 7), y.uac]}
          onPress={() => {
            if (disable) {
              return;
            }
            this.setState({
              acDay: todayMoment
            });
            this.props.onPressDay && this.props.onPressDay(todayMoment);
          }}>
          <View style={[y.w(50), y.h(50), y.ujc, y.uac]}>
            <View
              style={[y.bgColor(isSame ? "#00aea9" : "rgba(0,0,0,0)"), y.radiusA(40), y.w(30), y.h(30), y.ujc, y.uac]}>
              {disable ?
                <Text
                  style={[y.color("#bebebe"), y.fSize(13)]}>{todayMoment.date()}</Text>
                :
                <Text style={[y.color(isSame ? "#fff" : "#000"), y.fSize(13)]}>
                  {todayMoment.date()}
                </Text>
              }
            </View>
          </View>
        </Button>
      );
      date.add(1, "day");
    }
    return views;
  }

  render() {
    return (
      <View style={[y.bgColor("#fff"), this.props.style]}>
        <View style={[y.udr, y.ujb, y.uac, y.plr(10)]}>
          <Button
            style={[y.h(40), y.ujc, y.uas]}
            onPress={() => {
              this.state.curMonth.subtract(1, "year");
              this.forceUpdate();
            }}>
            <IconSvg type={"iconfanye_shuang_L"} size={18}/>
          </Button>
          <Button
            style={[y.h(40), y.ujc, y.uas]}
            onPress={() => {
              this.state.curMonth.subtract(1, "months");
              this.forceUpdate();
            }}>
            <IconSvg type={"iconfanye_dan_L"} size={18}/>
          </Button>
          <Text style={[y.fSize(14), y.color("#1D1D26")]}>
            {this.state.curMonth.format("YYYY年MM月")}
          </Text>
          <Button
            style={[y.h(40), y.ujc, y.uas]}
            onPress={() => {
              this.state.curMonth.add(1, "months");
              this.forceUpdate();
            }}>
            <IconSvg type={"iconfanye_dan_R"} size={18}/>
          </Button>
          <Button
            style={[y.h(40), y.ujc, y.uas]}
            onPress={() => {
              this.state.curMonth.add(1, "year");
              this.forceUpdate();
            }}>
            <IconSvg type={"iconfanye_shuang_R"} size={18}/>
          </Button>
        </View>
        <View style={[y.udr, y.btb(1), y.bdColor("#EEEEEE"), y.minh(35), y.uac]}>
          <Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>日</Text>
          <Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>一</Text>
          <Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>二</Text>
          <Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>三</Text>
          <Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>四</Text>
          <Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>五</Text>
          <Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>六</Text>
        </View>
        <View style={[y.udr, y.uf1, y.w100, y.uWrap, y.mb(10)]}>
          {
            //显示上个月的日期
            this.before()
          }
          {
            //显示当前月份的日期
            this.thisM()
          }
          {
            //显示下个月的日期
            this.after()
          }
        </View>
      </View>
    );
  }
}