newICSS/src/components/TimeInterval/index.jsx

import React from "react";
import style from "./index.less";
import $ from "jquery";
import { Calendar,Notify } from '@commonComp';
import { getCalendarDate, getCurrentDate } from "@utils/tools";

/**
 * top  定位距离
 * sure 是否显示确认按钮
 * timesure 点击确认事件
 * needTime 是否需要时分秒
 * timeLis 已选时间，点开后显示上次选择事件
 * handleChange 日期改变调用
 */
class TimeInterval extends React.Component {
  constructor(props) {
    super(props);
    const date = new Date();
    this.state = {
      startTime: getCurrentDate(false) + ' 00:00:00',
      endTime: getCurrentDate(false) + ' 23:59:59',
      show: false,
      flg: 0,
      timeLisStart: {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate(),
        hour: '00',
        minute: '00',
        second: '00'
      },
      timeLisEnd: {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate(),
        hour: '23',
        minute: '59',
        second: '59'
      }
    }
    this.handleShowTime = this.handleShowTime.bind(this)
    this.timeSure = this.timeSure.bind(this)
  }
  handleChangeDate(date) {
    // console.log(date,'外')
  }
  componentDidMount() {
    $(document).click((event) => {
      let startTimeDes = document.getElementById("startTimeDes")
      let endTimeDes = document.getElementById("endTimeDes")  
      let calendarDate = document.getElementById("calendarDate")
      if (calendarDate) {
        if (startTimeDes != event.target && endTimeDes != event.target && !calendarDate.contains(event.target)) {
          this.setState({ show: false });
        }
      }
    });
  }
  timeSure(date) {
    const { getStartTime, getEndTime } = this.props;
    if (this.state.flg == 1) {
      let time = getCalendarDate(date);
      let tmpTime = time.replace(/ |:/g, '-').split('-');
      let arr = this.state.endTime.replace(/ |:/g, '-').split('-');
      let dateBegin = (new Date(Date.UTC(tmpTime[0],tmpTime[1],tmpTime[2],tmpTime[3],tmpTime[4]))).getTime();
      let dateEnd = (new Date(Date.UTC(arr[0], arr[1], arr[2], arr[3],arr[4]))).getTime();
      let dateDes = (dateEnd - dateBegin)/(24 * 3600 * 1000) 
      if(dateEnd - dateBegin < 0){
        Notify.info("终止时间不能早于起始时间");
        return
      }else if(dateDes>90){
        Notify.info("只能搜索最近90天的数据");
        return
      }
      this.setState({
        show: false,
        startTime: time,//页面显示的时间
        timeLisStart: date//事件组件的日期
      })
      getStartTime(time)
    } else if (this.state.flg == 2) {
      let time = getCalendarDate(date);
      let tmpTime = time.replace(/ |:/g, '-').split('-');
      let arr = this.state.endTime.replace(/ |:/g, '-').split('-');
      let dateBegin = (new Date(Date.UTC(arr[0], arr[1], arr[2], arr[3],arr[4]))).getTime();
      let dateEnd = (new Date(Date.UTC(tmpTime[0],tmpTime[1],tmpTime[2],tmpTime[3],tmpTime[4]))).getTime();
      let dateDes = (dateEnd - dateBegin)/(24 * 3600 * 1000)
      if(dateEnd - dateBegin < 0){
        Notify.info("终止时间不能早于起始时间");
        return
      }else if(dateDes>90){
        Notify.info("只能搜索最近90天的数据");
        return
      }
      this.setState({
        show: false,
        endTime: time,
        timeLisEnd: date
      })
      getEndTime(time)
    }
  }
  handleShowTime(flg) {
    if (this.state.show) {
      if(flg == this.state.flg){
        this.setState({
          show: false,
          flg: flg
        })
      }else{
        this.setState({ show: false }, () => {
          this.setState({
            show: true,
            flg: flg
          })
        })
      }
    } else {
      this.setState({
        show: true,
        flg: flg
      })
    }
  }
  render() {
    const { startTime, endTime, show, timeLisStart, timeLisEnd, flg } = this.state
    const { handleShowTime, timeSure, handleChangeDate } = this
    return <div className={style.timeWrap}>
      <div className={style.timeIpts}>
        <input
          value={startTime}
          readOnly
          className={style.ipt}
          onClick={() => handleShowTime(1)}
          type="text"
          id="startTimeDes"
          placeholder="起始时间" />~
              <input
          value={endTime}
          readOnly
          id="endTimeDes"
          className={style.ipt}
          onClick={() => handleShowTime(2)}
          type="text"
          placeholder="终止时间" />
      </div>
        {
          show ? <Calendar timeLis={flg == 2 ? timeLisEnd : timeLisStart} top={40} sure={true} timeSure={timeSure} needTime={true} isShow={true} handleChange={handleChangeDate}></Calendar> : null
        }
    </div>
  }
}

export default TimeInterval;