mini-shop/component/date-time-picker/index.js

// components/date-time-picker/index.js

Component({ 
  /**
   * 定义组件生命周期函数
   */
  lifetimes: {
    attached() {
      // =====初始化时间选择器====
      this._initDateTimePickerFn()
    },
    detached() {

    }
  },
  /**
   * 对 <2.2.3 版本基础库的兼容
   */
  attached() {
    // =====初始化时间选择器====
    this._initDateTimePickerFn()
  },
  detached() {
  
  },
  /**
   * 组件相关配置项
   */
  options: {
    multipleSlots: true // 开启使用多个插槽
  },
  /**
   * 组件的属性列表
   */
  properties: {
    mode: {  // 选择器类型
      type: String,
      require: true
    },
    value: { // 回显的时间
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    rangeList: [],
    rangeValue: [],
    dateDetails: ['年','月', '时', '分', '秒']
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 初始化时间选择器
     */
    _initDateTimePickerFn() {
      try {
        const { value, mode} = this.data
        if (mode != 'dateminute' && mode != 'datetime') {
          throw new CommonException('请输入合法的时间选择器类型！', -1)
        }
        //====获取到当前时间===
        let showTimeValue = this._validateShowTime(value, mode)

        // ====获取年份====
        const currentYear = showTimeValue.substring(0, showTimeValue.indexOf('-'))
        const currentMouth = showTimeValue.split(" ")[0].split('-')[1]
        const yearList = this._gotDateTimeList({
          _start: Number(currentYear) - 100,
          _end: Number(currentYear) + 100, _type: 0
        })
        // ====获取月份===
        const monthList = this._gotDateTimeList({ _start: 1, _end: 12, _type: 1 })
        //====获取天数===
        const dayList = this._gotDayList(currentYear, currentMouth)
        // ====获取小时===
        const hourList = this._gotDateTimeList({ _start: 0, _end: 23, _type: 2 })
        // ====获取分钟===
        const munithList = this._gotDateTimeList({ _start: 0, _end: 59, _type: 3 })
        // ====获取秒===
        const secondList = this._gotDateTimeList({ _start: 0, _end: 59, _type: 4 })

        let rangeList = new Array()
        rangeList.push(yearList)
        rangeList.push(monthList)
        rangeList.push(dayList)
        rangeList.push(hourList)
        rangeList.push(munithList)
        mode === "datetime" && rangeList.push(secondList)
        this.setData({
          rangeList
        }, () => {
          this._echoDateTime(showTimeValue) // 初始化时间显示
        })
      } catch(err) {
        console.log(err)
      }
    },
    /**
     * 验证显示的时间是否合法
     * @param {Number} _value 要验证的时间
     * @param {Number} _mode  选择器类型
     */
    _validateShowTime(_value, _mode){
      let currentTime = formatTime(new Date()).replace(/\//g, "-")
      let showTimeValue = _value.trim() || currentTime
      const secondReg = /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/
      const munithReg = /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}$/
      if (_mode === 'dateminute') { // yyyy-MM-dd HH:mm
        // 验证是否合法
        secondReg.test(showTimeValue) && (showTimeValue = showTimeValue.substring(0, showTimeValue.lastIndexOf(':')))
        munithReg.test(showTimeValue) || (showTimeValue = currentTime.substring(0, currentTime.lastIndexOf(':')))
      } else { // yyyy-MM-dd HH:mm:ss
        munithReg.test(showTimeValue) && (showTimeValue += ':00')
        secondReg.test(showTimeValue) || (showTimeValue = currentTime)
      }
      return showTimeValue
    },
  
    /**
     * 获取年份、月份、小时、分钟、秒
     * @param {Number} _start 开始值
     * @param {Number} _end   结束值
     * @param {Number} _type  类型
     */
    _gotDateTimeList({_start, _end, _type}) {
      let resultDataList = new Array()
      for (let i = _start; i <= _end; i ++) {
        resultDataList.push(this._addZore(i) )
      }
      return resultDataList
    },
    /**
     * 获取天数
     * @param {Number} _year  年份
     * @param {Number} _mouth  月份
     */
    _gotDayList(_year, _mouth) {
      let now = new Date(_year, _mouth, 0)
      const dayLength = now.getDate()
      let dayList = new Array()
      for(let i = 1; i <= dayLength; i++) {
        dayList.push(this._addZore(i))
      }
      return dayList
    },
    /**
     * 补零
     * @param {Number} _num  数值
     */
    _addZore(_num) {
      return _num <  10 ? '0' + _num : _num.toString()
    },
    /**
     * 回显时间
     * @param {Number} _showTimeValue  初始化时要显示的时间
     */
    _echoDateTime(_showTimeValue) {
      const rangeList = this.data.rangeList
      let rangeValue = new Array()
      const list = _showTimeValue.split(/[\-|\:|\s]/)
      list.map((el, index) => {
        rangeList[index].map((item, itemIndex) => {
          item.indexOf(el) !== -1 && rangeValue.push(itemIndex)
        })
      })
      this.setData({
        rangeValue
      })
    },
    /**
     * 点击确定时触发的回调函数
     * @param {Number} ev
     */
    selectChangeFn(ev) {
      const selectValues = ev.detail.value
      const rangeList = this.data.rangeList
      let dateTime = ''
      selectValues.map((el, index) => {
        dateTime += rangeList[index][el].substring(0, rangeList[index][el].length)
      if(index == 0 || index == 1) {
          dateTime += '-'
        } else if (index == 3 || (index == 4 && index != selectValues.length - 1)) {
          dateTime += ':'
        } else if(index == 2 && index != selectValues.length -1){
          dateTime += ' '
        }
      })
      // ====触发父组件把值传递给父组件====
      this.triggerEvent('change', {value: dateTime})
    },
    /**
     *  当具体的一项的值发生改变时触发
     *  @param {Number} ev
     */
    selectColumnChangeFn(ev) {
      const { column, value } = ev.detail
      let { rangeList, rangeValue } = this.data
      let selectValue = Number(rangeList[column][value]
        .substring(0, rangeList[column][value].length - 1))
      if (column === 1) { // 改变月份 
        const currentYear = Number(rangeList[0][rangeValue[0]]
          .substring(0, rangeList[0][rangeValue[0]].length - 1))
        const dayList = this._gotDayList(currentYear, selectValue)
        rangeList[column + 1] = dayList
      }
      this.setData({
        rangeList
      })
    }
  }
})

// 自定义异常
function CommonException(errMsg, code){
  this.errMsg = errMsg
  this.code = code
}

// =====格式化日期===
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}