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

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

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

  static propTypes = {
    value : React.PropTypes.array,
    open : React.PropTypes.bool,
    pickerAway : React.PropTypes.func,
    days : React.PropTypes.number
  }

  static defaultProps = {
    bntTest : "时间组件按钮", 
    pickerAway : null,
    open : false,
    days: 7, // 显示时间段
    startData : "", // 开始时间 2017/12/29
    weekTxt : ["周日","周一","周二","周三","周四","周五","周六"]
  }

  componentWillMount() {
    let {value,open,days,startData} = this.props,
      timeArr = [],
      startDay = "",
      endDay = ""

    // 判断是否传入开始日期 并且检验传入日期是否有效
    if (startData && this.isEffectiveDate(startData)) {
      startDay = startData
    }else{
      startDay = this._getNewDate()
    }

    endDay = this._getEndData(startDay,days - 1)

    // 设置初始数组
    let opts = this._setInitOptions(startDay,endDay,startDay),
     newArrValue = startDay.split("/")

    // 设置默认显示参数
    this.state = {
      value : [this._addStrUnit(newArrValue[0],"年"),this._addStrUnit(newArrValue[1],"月"),this._setDaysWeek(newArrValue[0],newArrValue[1],newArrValue[2])], // 默认数值 开始时间 、 结束时间
      options: opts, // 默认数值
      open : open,
      startD : startDay,
      endD : endDay,
      valueD : newArrValue
    }
  }

  // 设置 options 当前年月日
  _setInitOptions(startDay,endDay,onDay){
    let self = this,
      start = startDay.split("/"),
      end = endDay.split("/"),
      on = onDay.split("/"),
      opt = [],
      /* opt 年月日 数组 */
      year = [],
      mouth = [],
      day = [],

      /* 开始、结束、当前 年月日 */
      ys = Number(start[0]),
      ye = Number(end[0]),
      yon = Number(on[0]),
      ms = Number(start[1]),
      me = Number(end[1]),
      mon = Number(on[1]),
      ds = Number(start[2]),
      de = Number(end[2]),
      don = Number(on[2]),

      optms = 1,
      optme = 12,
      optds = 1,
      optde = this._getDays(yon,mon)

    // 如果同年 2017/3/5 2017/6/7
    if (ys == yon && yon == ye) {
      optms = ms
      optme = me
      // 月份相同
      if (mon == me && mon == ms) {
        optds = ds
        optde = de
      }else{
        // 如果 当前月份 与 开始月份相同
        if (mon == ms) {
          optds = ds
        }
        // 如果 当前月份 与 结束月份相同
        if (mon == me) {
          optds = 1
          optde = de
        }
      }
    }else{
      // 如果不同年 2016/3/5 2017 /6/7
      // 如果当前年份与结束年份相等
      if (yon == ys) {
        optme = 12
        optms = ms
        // 如果 当前月份 与 开始月份相同
        if (mon == ms) {
          optds = ds
        }
        // 如果 当前月份 与 结束月份相同
        if (mon == me) {
          optds = 1
        }
      }

      if (yon == ye) {
        optms = 1
        optme = me

        // 如果 当前月份 与 结束月份相同
        if (mon == me) {
          optds = 1
          optde = de
        }
      }
    }

    // 设置 年份
    for ( ; ys <= ye; ys++) {
      year.push(this._addStrUnit(ys,"年"))
    }

    // 设置 月份
    for ( ; optms <= optme; optms++) {
      mouth.push(this._addStrUnit(optms,"月"))
    }

    // 设置 天
    for ( ; optds <= optde; optds++) {
      day.push(this._setDaysWeek(yon,mon,optds))
    }

    return opt = [year,mouth,day]
  } 

  _setDaysWeek(yon,mon,optds){
    let nowdt = `${yon}/${mon}/${optds}`,
        week = new Date(nowdt).getDay(),
        newdaysopt = `${optds}日 ${this.props.weekTxt[week]}`
    return newdaysopt
  }

  onChange(val, text ,listIndex){
    let {startD,endD,value,valueD} = this.state,
      newDataArr = value, // 当前时间数组
      startDataArr = startD.split("/"), // 起始时间数组
      onData = valueD // 当前时间数组

    // 当改变年份时
    if (listIndex == 0) {
      let yearval = this._deleteStrUnit(val,"年")
      // 当前年份
      if (startD.split("/")[0] == yearval) {
        onData = [yearval,startDataArr[1],startDataArr[2]]
      }else{
        onData = [yearval,1,1]
      }
    }

    // 当改变月份时
    if (listIndex == 1) {
      let mouthval = this._deleteStrUnit(val,"月")
      // 当前年份
      if (startDataArr[0] == onData[0] && startDataArr[1] == mouthval) {
        onData = [startDataArr[0],mouthval,startDataArr[2]]
      }else{
        onData = [onData[0],mouthval,1]
      }
    }

    // 当改变日时
    if (listIndex == 2) {
      onData[2] =  this._deleteStrUnit(val,"日")
    }

    newDataArr = [this._addStrUnit(onData[0],"年"),this._addStrUnit(onData[1],"月"),this._setDaysWeek(onData[0],onData[1],onData[2])]

    this.setState({
      value : newDataArr,
      options : this._setInitOptions(startD,endD,onData.join("/")),
      valueD : onData
    })
  }

  // 数组添加单位
  _addArrUnit(arr,unit){
    arr.map(function(re,i){
      return `${re}${unit}` 
    })
  }

  // 数组删除单位
  _deleteArrUnit(arr,unit){
    arr.map(function(re,i){
      return re.split(unit)[0]
    })
  }

  // 字符串添加单位
  _addStrUnit(string,unit){
    return `${string}${unit}` 
  }

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

  // 判断是否为有效日期
  isEffectiveDate(data){ 
    let dataArr = data.split("/"),
      intYear = dataArr[0],
      intMonth = dataArr[1],
      intDay = dataArr[2]
    if(isNaN(intYear)||isNaN(intMonth)||isNaN(intDay)) return false
    if(intMonth>12||intMonth<1) return false
    if ( intDay<1||intDay>31) return false
    if((intMonth==4||intMonth==6||intMonth==9||intMonth==11)&&(intDay>30)) return false
    if(intMonth==2){ 
      if(intDay>29) return false
      if((((intYear%100==0)&&(intYear%400!=0))||(intYear%4!=0))&&(intDay>28))return false
    }
    return true
  }

  // 获取 结束时间
  _getEndData(startData,days){
    let nowTamp = this._dataTransTamp(startData) + days * 60 * 60 * 1000 * 24
    return this._tampTransData(nowTamp)
  }

  // 时间戳转换时间
  _tampTransData(tamp){
    let d = new Date(parseInt(tamp))
    return d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate()
  }

  // 时间转换时间戳
  _dataTransTamp(data){
    return new Date(data).getTime()
  }

  // 设置结束小时参数值
  _pushEndHour(starthour){
    let endA = []
    for (var i = starthour + 1; i <= 24; i++) {
      endA.push(i)
    }
    return endA
  }

  onClickAway(){
    this.props.pickerAway && this.props.pickerAway(this.state.value,this.refs.pickertime)
  }

  render(){
    const {
      bntTest
    } = this.props

    return (
        <div className="dataPicker">
          <div className="pickertime" onClick={this._onClick.bind(this)} ref = "pickertime">{bntTest}</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}
           />
        </div>
      )
  }

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

  // 获取当前月份参数
  _getDays(y,m){
    return new Date(y,m,0).getDate()
  }

  _getNewDate(){
    let d = new Date()
    return d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate()
  }
}

module.exports = DataPickerV2