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

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

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import Picker from '../picker/picker.js'
class TimePeriod extends Component {
  constructor() {
    super()
  }

  static propTypes = {
    value: PropTypes.array,
    open: PropTypes.bool,
    pickerAway: PropTypes.func,
    isTimeoutFiltering: PropTypes.bool,
  }

  static defaultProps = {
    textvalue: '',
    delay: 10,  // 延迟分钟（分钟）
    pickerAway () { },
    open: false,
    unit: '次日',
    titleName: '每日可用时间段',
    // value: ['01:30', '20:00'],
    isTimeoutFiltering: false,
  }

  componentWillMount () {
    let { value, isTimeoutFiltering } = this.props,
      startTimeArr = this._setStartTime(),
      endTimeArr = this._setEndTime(this._setStartTime(isTimeoutFiltering)[0])
    // 设置默认显示参数
    this.setState({
      value: value ? value : [this._setStartTime(isTimeoutFiltering)[0], this._setEndTime(this._setStartTime(isTimeoutFiltering)[0])[0]], // 默认数值 开始时间 、 结束时间
      options: [startTimeArr, endTimeArr] // 默认数值
    })
  }

  onChange (val, text, listIndex) {
    // 当改变开始时间时
    let { value, options } = this.state,
      startTime = value[0],
      endTime = value[1]
    // 当改变开始时间时
    if (listIndex == 0) {
      let endTimeArr = this._setEndTime(val),
        endTimeVal = this.checkEndTimeIsBefore(val, endTime) ? endTimeArr[0] : endTime
      //console.log("------000", val, this.checkEndTimeIsBefore(val, endTime), endTimeArr[0], endTime)
      this.setState({
        value: [val, endTimeVal],
        options: [options[0], endTimeArr]
      }, () => {
        //console.log("------222", this.state.value)
      })
    } else {
      this.setState({
        value: [startTime, val]
      }, () => {
        //console.log("------1111", this.state.value)
      })
    }
  }

  // 检测结束时间是否早于开始时间  true 早于， false 晚于
  checkEndTimeIsBefore (startTime, endTime) {
    let { unit } = this.props,
      splitStartTime = startTime.split(':'),
      splitEndTime = endTime.split(':')

    // 如果 endTime 带有 次日 返回 false
    if (endTime.includes(unit)) {
      return false
    }
    // 对比小时
    if (Number(splitEndTime[0]) > Number(splitStartTime[0])) {
      console.log(22)
      return false
    }
    // 对比分钟

    if (Number(splitEndTime[0]) == Number(splitStartTime[0]) && Number(splitEndTime[1]) > Number(splitStartTime[1])) {
      console.log(2)
      return false
    }
    return true
  }

  onClickAway () {
    this.props.pickerAway && this.props.pickerAway(this.state.value, this.refs.pickertime)
    // console.log("))))", this.state.value)
  }

  render () {
    let { textvalue, open, titleName } = this.props, { options, value } = this.state

    return <div>
      <div className='pickertime' onClick={this.show.bind(this)} ref='pickertime'>
        {textvalue}
      </div>
      <Picker
        ref='date_picker'
        value={value}
        options={options}
        onChange={this.onChange.bind(this)}
        onClickAway={this.onClickAway.bind(this)}
        open={open}
        titleName={titleName} />
    </div>
  }

  show () {
    this.refs.date_picker.show()
  }

  // 设置开始时间
  _setStartTime (isTimeoutFiltering) {
    let { delay } = this.props,
      startArr = [],
      mdelay = 60 / delay,
      dhour = isTimeoutFiltering ? new Date().getHours() : 0,
      dminutes = new Date().getMinutes()
    for (var i = dhour, len = 24; i < len; i++) {
      for (var mi = 0, mlen = mdelay; mi < mlen; mi++) {
        let newi = i < 10 ? `0${i}` : i,
          newmi = mi * delay < 10 ? `0${mi * delay}` : mi * delay
        if (!(isTimeoutFiltering && dhour == newi && dminutes > newmi)) {
          startArr.push(`${newi}:${newmi}`)
        }
      }
    }
    return startArr
  }

  // 设置结束时间
  _setEndTime (startTime = '00:00') {
    let { delay, unit } = this.props,
      startArr = [],
      mdelay = 60 / delay,
      splitStartTime = startTime.split(':'),
      startH = Number(splitStartTime[0]),
      startM = Number(splitStartTime[1]),
      endArr = []

    for (var i = startH, len = mdelay * 48; i < len; i++) {
      if (i < 48) {
        for (var mi = 0, mlen = mdelay; mi < mlen; mi++) {
          if (startH == i && mi * delay <= startM) {
          } else if (startH + 30 == i && mi * delay > startM) {
          } else {
            let newi = i < 10 ? `0${i}` : i
            let newmi = mi * delay < 10 ? `0${mi * delay}` : mi * delay
            if (newi >= 24) {
              newi = `${unit}${newi - 24 < 10 ? `0${newi - 24}` : newi - 24}`
            }
            // console.log("newi", `${newi}:${newmi}`)
            endArr.push(`${newi}:${newmi}`)
          }
        }
      }
    }
    endArr.push(`${unit}24:00`)
    return endArr
  }
}

module.exports = TimePeriod