技術標籤：javascriptReact元件reactjs

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>
    );
  }
}