日-周-月-年，时间选择组件

1.场景

日：默认本日，以日为单位选择；周：默认本周，以周为单位选择；月-年类似

2.组件：

使用antd组件DatePicker

3.效果

4.源码：

/**
 * @name TimeList
 * @desc 日期列表
 * @author 
 * @date 2021/02/03
 */
import React, { Component } from "react";
import { DatePicker } from "antd";
import moment from "moment";
import styles from "./styles.module.less";

const { RangePicker, WeekPicker, MonthPicker } = DatePicker;
const dateFormat = "YYYY-MM-DD";
const timeListTwo = [
  { code: 1, name: "日" },
  { code: 2, name: "周" },
  { code: 3, name: "月" },
  { code: 4, name: "年" }
];
const defaultDate = moment(new Date()).format(dateFormat);

class Anothertime extends Component {
  state = {
    timeCode: 1, //时间code
    startTime: defaultDate, //开始时间
    endTime: defaultDate, //结束时间
    time: defaultDate, //日期
    yearSelect: false //年份选择面板
  };
  /**
   * @name typeChange
   * @param {Number} code 类型code
   * @description 时间类型变化
   */
  typeChange = (code) => {
    this.setState({ timeCode: code });
    this.times(code);
  };
  /**
   * @name times
   * @param string YYYY-MM-DD
   * @description 时间类型所对应的时间
   */
  times = (timeCode) => {
    this.timeCommon(timeCode, new Date());
  };
  /**
   * @name newTimeChange
   * @param {Object} date 标准时间
   * @param {String} dateString 当前选中时间字符串
   * @description 时间变化
   */
  newTimeChange = (date) => {
    const { timeCode } = this.state;
    this.timeCommon(timeCode, date);
  };
  /**
   * @name timeCommon
   * @param {Number} timeCode 时间类型
   * @param {Object} time 标准时间
   * @description 时间变化公用方法
   */
  timeCommon = (timeCode, date) => {
    let startTime = "";
    let endTime = "";
    let time = moment(date).format(dateFormat);
    if (timeCode === 1) {
    //日
      startTime = time;
      endTime = time;
    } else if (timeCode === 2) {
    //周
      startTime = moment(time).startOf("week").format(dateFormat);
      endTime = moment(time).endOf("week").format(dateFormat);
    } else if (timeCode === 3) {
    //月
      startTime = moment(time).startOf("month").format(dateFormat);
      endTime = moment(time).endOf("month").format(dateFormat);
    } else if (timeCode === 4) {
    //年
      let year = moment(time).format("YYYY");
      startTime = year + "-01-01";
      endTime = year + "-12-31";
      time = startTime;
    }
    this.setState({ startTime, endTime, time, yearSelect: false });
  };
  /**
   * @name openYearSelect
   * @description 年分选择面板展示与否
   */
  openYearSelect = () => {
    this.setState({ yearSelect: true });
  };
  render() {
    const { timeCode, time, yearSelect, startTime, endTime } = this.state;
    return (
      <TimeChange
        time={time}
        timeCode={timeCode}
        yearSelect={yearSelect}
        typeChange={this.typeChange}
        newTimeChange={this.newTimeChange}
        openYearSelect={this.openYearSelect}
      />
    );
  }
}
class TimeChange extends Component {
  render() {
    // newTermChange = () => {}
    const { time, timeCode, yearSelect, typeChange = () => {}, newTimeChange = () => {}, openYearSelect = () => {} } = this.props;
    return (
      <div className={styles.time_content}>
        时间段：
        <div className={styles.ul}>
          {timeListTwo.map((v) => (
            <li key={v.code} className={`${styles.inline} ${timeCode === v.code ? styles.active : null}`} onClick={() => typeChange(v.code)}>
              {v.name}
            </li>
          ))}
        </div>
        {timeCode === 1 ? (
          <DatePicker allowClear={false} value={moment(time, dateFormat)} onChange={newTimeChange} />
        ) : timeCode === 2 ? (
          <WeekPicker allowClear={false} value={moment(time, dateFormat)} onChange={newTimeChange} />
        ) : timeCode === 3 ? (
          <MonthPicker allowClear={false} value={moment(time, dateFormat)} onChange={newTimeChange} />
        ) : (
          <DatePicker
            value={moment(time, dateFormat)}
            open={yearSelect}
            mode="year"
            format="YYYY"
            onOpenChange={openYearSelect}
            onPanelChange={newTimeChange}
            allowClear={false}
          />
        )}
      </div>
    );
  }
}