picker年月日时分秒时间选择器组件(新增插槽初始化,年月日时分秒与时分秒可配置)

1.组件页面wepy的

<style lang="scss">
.text{
  font-size: 14px;
}
</style>
<template>
  <picker class="picker-mbx" mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
    <view class="text">
      <div v-if="selected">{{strTime}}</div>
      <div v-else><slot></slot></div>
    </view>
  </picker>
</template>
<script>
  import wepy from '@wepy/core'
  const moment = require('moment')
  import { dateTimePicker, getMonthDay, getNewDateArryByStr, withData } from '../common/time'
  const cutTimeStr = (str) => {
    const _str = str.substring(0, str.length - 1)
    return withData(_str)
  }
  wepy.component({
    props: {
      // 年月日 时分秒
      mode: {
        default: 'date'
      },
      // 暂时使用slot
      label: {
        default: '请选择时间'
      },
      // 现有值，需要时规范的时间格式
      val: {
        type: String
      }

    },
    watch: {
      strTime: {
        deep: true,
        handler(val) {
          console.log(val)
          if (val && this.selected) {
            this.$emit('uptime', val)
          }
        }
      }
    },
    computed: {
      strTime() {
        try {
          let dateTimeArray = this.dateTimeArray, dateTime = this.dateTime
          //新增 时分秒
          if (this.mode==='time') {
            return cutTimeStr(dateTimeArray[0][dateTime[0]]) + ':' + cutTimeStr(dateTimeArray[1][dateTime[1]]) + ':' + cutTimeStr(dateTimeArray[2][dateTime[2]])
          } else {
            return cutTimeStr(dateTimeArray[0][dateTime[0]]) + '-' + cutTimeStr(dateTimeArray[1][dateTime[1]]) + '-' + cutTimeStr(dateTimeArray[2][dateTime[2]]) + ' ' + cutTimeStr(dateTimeArray[3][dateTime[3]]) + ':' + cutTimeStr(dateTimeArray[4][dateTime[4]]) + ':' + cutTimeStr(dateTimeArray[5][dateTime[5]])
          }
        } catch (e) {
          return ''
        }
      }
    },
    data: {
      selected: false,
      dateTimeArray: [],
      dateTime: [0, 0, 0, 0, 0, 0]
    },
    ready() {
      const _str = this.val
      let hasDate = false
      if (_str) {
        hasDate = getNewDateArryByStr(new Date(_str))
      }
      let {dateTimeArray, dateTime} = dateTimePicker('', '', hasDate)
      if (this.mode==='time') {
        dateTimeArray = dateTimeArray.slice(-3)
        dateTime = dateTime.slice(-3)
        console.log(this.mode,dateTimeArray)
      }
      this.dateTimeArray = dateTimeArray
      this.dateTime = dateTime
    },
    methods: {
      changeDateTime(e) {
        const val = e.$wx.detail.value
        console.log(val)
        this.dateTime = val
        this.selected = true
      },
      changeDateTimeColumn(e) {
        console.log(e,'ss')
        const val = e.$wx.detail.value
        let arr = this.dateTime
        let dateArr = this.dateTimeArray
        arr[e.$wx.detail.column] = val
        if(this.mode!=='time'){
          dateArr[2] = getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
        }
        this.dateTimeArray = dateArr
        this.dateTime = arr
      }
    }
  })
</script>
<config>
  {
    "usingComponents": {
      "icon": "~@/components/icon"
    }
  }
</config>

2.依赖的js文件

function withData(param) {
  return param < 10 ? '0' + param : '' + param
}
function getLoopArray(start, end, unit = '') {
  var _start = start || 0
  var _end = end || 1
  var array = []
  for (var i = _start; i <= _end; i++) {
    array.push(withData(i + unit))
  }
  return array
}
function getMonthDay(year, month) {
  let flag = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)
  let array = null
  switch (month) {
    case '01':
    case '03':
    case '05':
    case '07':
    case '08':
    case '10':
    case '12':
    case '1月':
    case '3月':
    case '5月':
    case '7月':
    case '8月':
    case '10月':
    case '12月':
      array = getLoopArray(1, 31, '日')
      break
    case '04':
    case '06':
    case '09':
    case '11':
    case '4月':
    case '6月':
    case '9月':
    case '11月':
      array = getLoopArray(1, 30, '日')
      break
    case '02':
    case '2月':
      array = flag ? getLoopArray(1, 29, '日') : getLoopArray(1, 28, '日')
      break
    default:
      array = '月份格式不正确，请重新输入！'
  }
  return array
}
function getNewDateArry() {
  // 当前时间的处理
  var newDate = new Date()
  const year = withData(newDate.getFullYear()),
    mont = withData(newDate.getMonth() + 1),
    date = withData(newDate.getDate()),
    hour = withData(newDate.getHours()),
    minu = withData(newDate.getMinutes())
  // seco = withData(newDate.getSeconds());

  return [year, mont, date, hour, minu]
}

/**
 * 多了单位
 * @returns {string[]}
 */
function getNewDateArryByStr() {
  // 当前时间的处理
  var newDate = new Date()
  var year = newDate.getFullYear() + '年',
    mont = (newDate.getMonth() + 1) + '月',
    date = newDate.getDate() + '日',
    hour = newDate.getHours() + '时',
    minu = newDate.getMinutes() + '分',
    seco = newDate.getSeconds() + '秒'

  return [year, mont, date, hour, minu,seco]
}
const cutTimeStr = (str) => str.substring(0, str.length - 1)
function dateTimePicker(startYear, endYear, date) {
  // 返回默认显示的数组和联动数组的声明
  var dateTime = [], dateTimeArray = [[], [], [], [], []]
  var start = startYear || new Date().getFullYear()
  var end = endYear || 2100
  // 默认开始显示数据
  var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArryByStr()

  // 处理联动列表数据
  /* 年月日 时分秒 */
  dateTimeArray[0] = getLoopArray(start, end, '年')
  dateTimeArray[1] = getLoopArray(1, 12, '月')
  const tempTime = getNewDateArry()
  dateTimeArray[2] = getMonthDay(tempTime[0], tempTime[1])
  dateTimeArray[3] = getLoopArray(0, 23, '时')
  dateTimeArray[4] = getLoopArray(0, 59, '分')
  dateTimeArray[5] = getLoopArray(0, 59, '秒')

  dateTimeArray.forEach((current, index) => {
    const idx = current.indexOf(defaultDate[index]) ? current.indexOf(defaultDate[index]) : 0
    dateTime.push(idx)
  })

  return {
    dateTimeArray: dateTimeArray,
    dateTime: dateTime
  }
}
module.exports = {
  dateTimePicker: dateTimePicker,
  getMonthDay: getMonthDay,
  getNewDateArry: getNewDateArry
}

3.使用moment.js
网址http://momentjs.cn/ 安装npm依赖包
4.使用 引入组件

 <time @uptime="upEndTime" :val="end_time">
          <span class="fz-14" v-if="end_time">{{end_time}}</span>
          <span class="fz-14 c9" v-else>请选择结束时间</span>
  </time>