实现一个自定义的时间下拉组件——组件的封装（仅供参考）

时间下拉组件

父组件代码

```javascript
import React from "react";
import { ConfigProvider, Button } from "@ali/deep"; //这里的组件可以自己去选择，比如antd
import AlibrainLegalMonthSelect from "./dataSelect";

class DeepMycomponent extends React.Component {
  static displayName = "Mycomponent";

  static propTypes = {
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  // 获取默认值的函数
  // getdefaultvalue(val) {
  //   console.log(val);
  // }
  // onChange事件
  // onChange = (val) => {
  //   console.log(val);
  // };

  // 现有属性api  days ,month ,label ,format , onChange事件 ,getdefaultvalue事件

  render() {
    return <AlibrainLegalMonthSelect />;
  }
}

export default ConfigProvider.config(DeepMycomponent, {});

子组件代码

import React, { Component } from "react";
import { ConfigProvider, Select, DatePicker } from "@ali/deep";
import "@ali/deep/lib/select/style";
import dayjs from "dayjs";

const Option = Select.Option;

class AlibrainLegalMonthSelect extends Component {
  static defaultProps = {
    format: "YYYY-MM",
    label: "日期选择",
    defaultMonth: 12,
  };
  constructor(props) {
    super(props);
    this.state = {
      newArr: [],
      defaultValue: "",
    };
  }
  componentWillMount() {
    const { month, days, format } = this.props;
    if (!month && !days) {
      const newArr = this.getMonthBetween(
        dayjs(new Date())
          .subtract(this.props.defaultMonth, "month")
          .format(format),
        dayjs(new Date()).format(format),
        format
      );
      this.getdefaultvalue(newArr[0].value);
      this.setState({
        defaultValue: newArr[0].value,
        newArr,
      });
    } else {
      if (
        days &&
        days < 31 &&
        (format === "YYYY-MM-DD" || format === "YYYY/MM/DD")
      ) {
        const newArr = this.getBetweenDateStr(format);
        this.getdefaultvalue(newArr[0].value);
        this.setState({
          defaultValue: newArr[0].value,
          newArr,
        });
      } else if (month && (format === "YYYY-MM" || format === "YYYY/MM")) {
        const newArr = this.getMonthBetween(
          dayjs(new Date()).subtract(month, "month").format(format),
          dayjs(new Date()).format(format),
          format
        );
        this.getdefaultvalue(newArr[0].value);
        this.setState({
          newArr,
          defaultValue: newArr[0].value,
        });
      } else {
        throw new Error("Time or format Type error");
      }
    }
  }

  // 月份选取及自定义格式设置函数
  getMonthBetween(start, end, format) {
    var result = [];
    const TIME_MAP = new Map();
    TIME_MAP.set("YYYY-MM", "-");
    TIME_MAP.set("YYYY/MM", "/");
    TIME_MAP.set("YYYY-MM-DD", "-");
    TIME_MAP.set("YYYY/MM/DD", "/");

    var s = TIME_MAP.get(format) === "-" ? start.split("-") : start.split("/");
    var e = TIME_MAP.get(format) === "-" ? end.split("-") : end.split("/");
    var min = new Date();
    var max = new Date();
    var yearMonthCode;
    min.setFullYear(s[0], s[1] * 1 - 1, 1); //开始日期
    max.setFullYear(e[0], e[1] * 1 - 1, 1); //结束日期
    var curr = min;
    while (curr <= max) {
      yearMonthCode = dayjs(curr).format(format);
      var month = curr.getMonth();
      var year = curr.getFullYear();

      var str = curr.getFullYear() + "-" + month;
      var s = curr.getFullYear() + "-0";
      if (str == s) {
        str = curr.getFullYear() + "-1";
      }
      var m = month + 1;
      result.push({
        label: yearMonthCode,
        value: yearMonthCode.replace(/\/|-/g, ""),
      });
      curr.setMonth(month + 1);
    }
    return result.reverse().slice(1, result.length);
  }

  //   当传入的参数为days的时候执行
  getBetweenDateStr() {
    const { days, format } = this.props;
    //startData是days天前的时间   endData是当前时间（均为年月日）
    const endDate = dayjs(new Date()).format(format);
    const sutDay = new Date() - days * 1000 * 60 * 60 * 24;
    var startDate = dayjs(new Date(sutDay)).format(format);
    const type = this.type(format);
    var getDate = function (str) {
      var tempDate = new Date();
      var list = str.split(type);
      tempDate.setFullYear(list[0]);
      tempDate.setMonth(list[1] - 1);
      tempDate.setDate(list[2]);
      return tempDate;
    };
    // 减完对应天数的时间戳 转换成days天后的那一天
    var date1 = getDate(startDate);
    var date2 = getDate(endDate);
    if (date1 > date2) {
      var tempDate = date1;
      date1 = date2;
      date2 = tempDate;
    }
    date1.setDate(date1.getDate() + 1);
    var dateArr = [];
    var i = 0;
    while (
      !(
        date1.getFullYear() == date2.getFullYear() &&
        date1.getMonth() == date2.getMonth() &&
        date1.getDate() == date2.getDate()
      )
    ) {
      var dayStr = date1.getDate().toString();
      if (dayStr.length == 1) {
        dayStr = "0" + dayStr;
      }
      var monthStr = (date1.getMonth() + 1).toString();
      if (monthStr.length == 1) {
        monthStr = "0" + monthStr;
      }
      dateArr[i] = date1.getFullYear() + type + monthStr + type + dayStr;
      i++;
      date1.setDate(date1.getDate() + 1);
    }
    dateArr.splice(0, 0, startDate).reverse();
    dateArr = dateArr.map((item) => {
      const obj = {};
      obj.label = item;
      obj.value = item.replace(/\/|-/g, "");
      return obj;
    });
    return dateArr.reverse();
  }

  //  时间日期格式的自定义操作
  type = (format) => {
    const TIME_MAP = new Map();
    TIME_MAP.set("YYYY-MM", "-");
    TIME_MAP.set("YYYY/MM", "/");
    TIME_MAP.set("YYYY-MM-DD", "-");
    TIME_MAP.set("YYYY/MM/DD", "/");
    const type = TIME_MAP.get(format) === "-" ? "-" : "/";
    return type;
  };

  // 判断用户是否传入getdefaultvalue 的优化
  getdefaultvalue(val) {
    if (this.props.hasOwnProperty("getdefaultvalue")) {
      this.props.getdefaultvalue(val);
    }
  }

  render() {
    const { label } = this.props;
    const { defaultValue } = this.state;
    return (
      <div>
        <Select
          label={label}
          onChange={this.props.onChange}
          defaultValue={defaultValue}
        >
          {this.state.newArr &&
            this.state.newArr.map((item) => {
              return (
                <Option key={item.value} value={item.value}>
                  {item.label}
                </Option>
              );
            })}
        </Select>
      </div>
    );
  }
}

export default ConfigProvider.config(AlibrainLegalMonthSelect, {});

API

API	类型
days	number
label	string
month	number
format	string
getdefaultvalue	function（用于获取默认值的value）
onChange	function

父组件就是我们自己去暴露出去的组件，也是我们封装好去给开发者去用的，如果只是单纯的想实现一个时间下拉组建，可以参考子组件中的函数

效果展示