jimu-mobile/src/components/timepicker/timeSectionPicker.js

积木组件库助力移动端开发

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import Picker from '../picker/picker.js';

class DateTimePicker extends Component {
  constructor() {
    super();
  }

  static propTypes = {
    open: PropTypes.bool,
    pickerAway: PropTypes.func,
    len: PropTypes.number,
  }

  static defaultProps = {
    textvalue: '时间组件按钮',
    pickerAway() {},
    open: false,
    format: ['yyyy年MM月dd日', '点', '分'],
    startData: '2017/12/21 23:55',
    endData: '2018/3/8 01:20',
    defaultData: '2018/2/26 23:55',
    scale: 5, //  分钟刻度
    titleName: '当前时间', // title
    dayArrText: ['今天', '明天'], // 今天以及明天日期显示名
    nameFormatBool: true, // 日期显示格式
  }

  componentWillMount() {
    this.setInitState();
  }

  componentWillReceiveProps(nextProps) {
    this.setInitState();
  }

  setInitState() {
    let {
        startData, endData, defaultData, scale, format, open, nameFormatBool,dayArrText
      } = this.props,
      // delay 以后获取时间
      dates = this.setDateFormat(defaultData, 'yyyy/MM/dd hh:mm'),
      // 设置默认显示参数
      onDataTime = this._getTimeRound(defaultData, scale),
      startDateTime = this._getTimeRound(startData, scale),
      endDateTime = this._getTimeRound(endData, scale),
      len = this._getDayDiff(endDateTime.split(' ')[0], startDateTime.split(' ')[0]),
      onDataArr = this.setDateFormat(onDataTime, 'yyyy/MM/dd hh:mm'),
      startDateArr = this.setDateFormat(startDateTime, 'yyyy/MM/dd hh:mm'),
      endDateArr = this.setDateFormat(endDateTime, 'yyyy/MM/dd hh:mm'),

      // 获取时间范围
      getHoverOver = this._checkHourOver(onDataArr, startDateArr, endDateArr),
      startMinutes = 0,
      endMinutes = 59,
      nowdate = this._getDataTime(),
      tomorrow = this._tomorrowData(),
      valueFirst = this.setDateFormat(onDataTime, 'yyyy/M/d').fmt,
      setValueFirst = `${this.setDateFormat(onDataTime, format[0]).fmt}`;

    if (nameFormatBool) {
      if (valueFirst == nowdate) {
        setValueFirst = dayArrText[0];
      } else if (valueFirst == tomorrow) {
        setValueFirst = dayArrText[1];
      }
    }

    // 设置起始的分钟数
    if (onDataTime.split(':')[0] == startDateTime.split(':')[0]) {
      startMinutes = startDateArr.datelist.m;
    }

    if (onDataTime.split(':')[0] == endDateTime.split(':')[0]) {
      endMinutes = endDateArr.datelist.m;
    }

    this.setState({
      open,
      onDataTime,
      startDateTime,
      endDateTime,
      len,
      onDataArr,
      startDateArr,
      endDateArr,
      value: [setValueFirst, `${onDataArr.datelist.h}${format[1]}`, `${onDataArr.datelist.m}${format[2]}`], // 默认数值 开始时间 、 结束时间
      options: [this._setInitData(startDateArr.fmt, len), this._setInitHour(getHoverOver.starthour, getHoverOver.endhour), this._setInitMinutes(startMinutes, endMinutes)], // 初始数值
    });
  }

  // 判断小时展示范围
  _checkHourOver(onDataArr, startDate, endDate) {
    let starthour = 0,
      endhour = 23;
    // 判断当前日期是否是起始日期
    if (onDataArr.datelist.y == startDate.datelist.y && onDataArr.datelist.M == startDate.datelist.M && onDataArr.datelist.d == startDate.datelist.d) {
      starthour = startDate.datelist.h;
    }

    // 判断当前日期是否是结束日期
    if (onDataArr.datelist.y == endDate.datelist.y && onDataArr.datelist.M == endDate.datelist.M && onDataArr.datelist.d == endDate.datelist.d) {
      endhour = endDate.datelist.h;
    }

    return {
      starthour,
      endhour,
    };
  }

  // 获取两个区间日期 direction ：before 获取开始日期，after 获取结束日期
  _getDataDiff(onData, sectionMinutes, direction) {
    let { scale } = this.props,
      timestamp = new Date(onData).getTime(),
      diffTamp = sectionMinutes * 1000 * 60,
      diffDate = direction == 'after' ? timestamp + diffTamp : timestamp - diffTamp,
      date = new Date(parseInt(diffDate)),
      setMinutes = date.getMinutes();

    for (let i = setMinutes, max = setMinutes + scale; i <= max; i++) {
      if (!(i % scale)) {
        setMinutes = i >= 60 ? (i - 60) : i;
      }
    }

    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${setMinutes}`;
  }

  // 当前日期取整  upward 是否向上取值
  _getTimeRound(time, scale, upward = true) {
    let onMinutes = Number(time.split(':')[1]),
      timestamp = new Date(time).getTime(),
      scaleMinutes = onMinutes,
      diffTamp = 0,
      isback = true;

    if (upward) {
      for (var i = onMinutes, max = onMinutes + scale; i <= max; i++) {
        if (!(i % scale) && isback) {
          scaleMinutes = i;
          isback = false;
        }
      }
    } else {
      for (var i = onMinutes, min = onMinutes - scale; i >= min; i--) {
        if (!(i % scale) && isback) {
          scaleMinutes = i;
          isback = false;
        }
      }
    }

    diffTamp = (scaleMinutes - onMinutes) * 1000 * 60;
    const date = new Date(parseInt(timestamp + diffTamp));
    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
  }

  // 查看两个日期间隔几天 startDate、endDate  格式 如：2017/8/2
  _getDayDiff(startDate, endDate) {
    let startTime = new Date(Date.parse(startDate)).getTime(),
      endTime = new Date(Date.parse(endDate)).getTime(),
      dates = Math.abs((startTime - endTime)) / (1000 * 60 * 60 * 24);
    return dates;
  }

  // 设置初始日期展示
  _setInitData(startDate, len) {
    let self = this,
      { format, delay, nameFormatBool,dayArrText} = this.props,
      timestamp = new Date(startDate).getTime(),
      dataArr = [],
      nowdate = this._getDataTime(),
      tomorrow = this._tomorrowData();
    this.dataTimeArr = [];
    for (let i = 0; i <= len; i++) {
      const tamp = timestamp + 24 * 60 * 60 * 1000 * i;

      if (nameFormatBool) {
        if (nowdate == self.setDateFormat(new Date(parseInt(tamp)), 'yyyy/M/d').fmt) {
          dataArr.push(dayArrText[0]);
        } else if (tomorrow == self.setDateFormat(new Date(parseInt(tamp)), 'yyyy/M/d').fmt) {
          dataArr.push(dayArrText[1]);
        } else {
          dataArr.push(self.setDateFormat(new Date(parseInt(tamp)), format[0]).fmt);
        }
      } else {
        dataArr.push(self.setDateFormat(new Date(parseInt(tamp)), format[0]).fmt);
      }

      this.dataTimeArr.push(self.setDateFormat(new Date(parseInt(tamp)), 'yyyy/MM/dd').fmt);
    }

    return dataArr;
  }

  // 设置初始小时展示
  _setInitHour(starthour, endhour) {
    let self = this,
      { value, format, scale } = this.props,
      hourArr = [],
      deleytamp = new Date().getTime() + 60 * 1000 * scale,
      date = new Date(parseInt(deleytamp)),
      dates = this.setDateFormat(date, 'yyyy/MM/dd hh:mm'),
      gethour = starthour;

    for (let i = gethour; i <= endhour; i++) {
      hourArr.push(i + format[1]);
    }
    return hourArr;
  }

  // 设置初始小时展示
  _setInitMinutes(minutes, end) {
    let self = this,
      { scale, value, format } = this.props,
      minutesArr = [];

    for (let i = 0; i <= end; i++) {
      // minutesArr.push(i + format[1])
      if (!(i % scale)) {
        if (minutes <= i) {
          minutesArr.push(i + format[2]);
        }
      }
    }

    minutesArr = minutesArr.length == 0 ? [`0${format[2]}`] : minutesArr;
    return minutesArr;
  }

  // 设置delay 以后时间 日期格式化  yyyy-MM-dd hh:mm ; yyyy/MM/dd hh:mm
  setDateFormat(nowdate, fmt) {
    let deleytamp = new Date(nowdate).getTime(),
      date = new Date(parseInt(deleytamp)),
      o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
      };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (`${date.getFullYear()}`).substr(4 - RegExp.$1.length));
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((`00${o[k]}`).substr((`${o[k]}`).length)));
    }

    return {
      fmt,
      datelist: {
        y: date.getFullYear(),
        M: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        m: date.getMinutes(),
      },
    };
  }

  // 获取当前日期
  _tomorrowData() {
    let deleytamp = new Date().getTime() + 24 * 60 * 60 * 1000,
      d = new Date(parseInt(deleytamp));
    return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
  }

  // 获取当前日期
  _getDataTime() {
    const d = new Date();
    return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
  }

  onClickAway() {
    let { format } = this.props,
      { value, onDataTime } = this.state,
      fmt = new Date(onDataTime).getTime();
    this.props.pickerAway && this.props.pickerAway(value, onDataTime, this.refs.pickertime, {
      fmt,
      data: onDataTime,
    });
  }

  // 字符串删除单位
  _deleteStrUnit(string, unit) {
    return string.split(unit)[0];
  }

  onChange(val, text, listIndex) {
    let { format } = this.props,
      {
        options, value, len, startDateArr, endDateArr, startDateTime, endDateTime, onDataTime,
      } = this.state,
      day = options[0],
      hours = options[1],
      minutes = options[2],
      setHour = hours,
      setMinute = minutes,
      onDay = value[0],
      onHours = value[1],
      onMinutes = value[2];

    // 日期更改时
    if (listIndex === 0) {
      onDay = val;

      // 开始日期
      if (onDay == day[0]) {
        const getHour = this._deleteStrUnit(onHours, format[1]);
        // 判断小时是否在开始范围内
        setHour = this._setInitHour(startDateArr.datelist.h, 23);
        if (getHour < startDateArr.datelist.h) {
          onHours = startDateArr.datelist.h + format[1];
        }
      }

      // 结束日期
      if (onDay == day[len]) {
        const getHour = this._deleteStrUnit(onHours, format[1]);
        setHour = this._setInitHour(0, endDateArr.datelist.h);
        if (getHour > endDateArr.datelist.h) {
          onHours = endDateArr.datelist.h + format[1];
        }
      }

      if (onDay !== day[0] && onDay !== day[len]) {
        setHour = this._setInitHour(0, 23);
      }
    }

    // 小时修改时
    if (listIndex === 1) {
      onHours = val;
    }

    if (listIndex === 2) {
      onMinutes = val;
    }

    // 开始日期
    if (onDay == day[0] && onHours == setHour[0]) {
      let getMinute = this._deleteStrUnit(onMinutes, format[2]),
        endMinutes = startDateTime.split(':')[0] == endDateTime.split(':')[0] ? endDateArr.datelist.m : 59;
      // 判断分钟是否在开始范围内
      setMinute = this._setInitMinutes(startDateArr.datelist.m, endMinutes);
      if (getMinute < Number(startDateArr.datelist.m)) {
        onMinutes = startDateArr.datelist.m + format[2];
      }
    }
    // 结束日期
    else if (onDay == day[len] && this._deleteStrUnit(onHours, format[1]) == endDateArr.datelist.h) {
      const getMinute = this._deleteStrUnit(onMinutes, format[2]);
      // 判断分钟是否在开始范围内
      setMinute = this._setInitMinutes(0, endDateArr.datelist.m);
      if (getMinute > Number(endDateArr.datelist.m)) {
        onMinutes = endDateArr.datelist.m + format[2];
      }
    } else {
      setMinute = this._setInitMinutes(0, 59);
    }

    // 设置日期
    for (let i = day.length - 1; i >= 0; i--) {
      if (day[i] == onDay) {
        onDataTime = `${this.dataTimeArr[i]} ${this._deleteStrUnit(onHours, format[1])}:${this._deleteStrUnit(onMinutes, format[2])}`;
      }
    }

    this.setState({
      onDataTime,
      value: [onDay, onHours, onMinutes],
      options: [day, setHour, setMinute],
    });
  }

  render() {
    const { textvalue } = this.props;

    return (
      <div className="dataPicker">
        <div className="pickertime" onClick={this._onClick.bind(this)} ref="pickertime">
          {textvalue}
        </div>
        <Picker
          ref="date_picker"
          value={this.state.value}
          options={this.state.options}
          onChange={this.onChange.bind(this)}
          onClickAway={this.onClickAway.bind(this)}
          open={this.state.open}
          titleName={this.props.titleName}
        />
      </div>
    );
  }

  _onClick() {
    this._showFunc();
  }

  show() {
    this._showFunc();
  }

  _showFunc() {
    this.setInitState();
    this.refs.date_picker.show();
  }
}

module.exports = DateTimePicker;