uniapp使用小程序原生picker标签封装日期时间组件

实现效果：

该组件默认显示年月日时分，不到秒，有这需求的可以自己酌情修改，可以传入开始时间和结束时间进行联动

使用

• params对象传入的值有
  • pText：指定默认显示时间(懒得改命名了哈哈~)
  • placeholder：默认显示的文本
  • startDateTime：开始时间，如果不传默认显示当前时间的前十年
  • endDateTime：结束时间，不传则显示当前时间

<template>
 <dateTimePicker :params="params" @getDateString="getDateString" />
</template>
<script>
  export default {
  data() {
      return {
        params:{
          placeholder: '请选择上机时间',
          startDateTime: dateString.formatDate({ day: 7 }),  // '2021/09/21 15:52'
          endDateTime: dateString.formatDate({ day: 0 }),  // '2021/09/28 15:52'
          pText: '',  // '2021/09/28 15:52'
        }
      }
    },
  method:{
    getDateString(value){
        console.log('当前选择时间：'+value)
    }
  }
}
</script>

引入 .vue组件

<template>
  <picker class="dateTimePicker" indicator-style="width:100rpx" mode="multiSelector" :value="dateTime"
    @change="changeDateTime" @columnchange="changeDateTimeColumn" :range="dateTimeArray">
    <view class="tui-picker-detail wrap column-center">
      <text
        :style="{color: (dateTimeWhole||params.pText)?'#333333':'#999999'}">{{dateTimeWhole || params.pText || params.placeholder ||"请选择您测量的时间"}}</text>
      <image class="icon" src="/static/mine/meArrowRight.png" mode=""></image>
    </view>
  </picker>
</template>

<script>
  import { dateTimePicker, dateString } from '@/common/utils/index.js'
  export default {
    props: {
      params: Object
    },
    data() {
      return {
        dateTimeArray: null,
        dateTime: null,
        startDateTime: this.params.startDateTime || dateString.formatYear(10),
        endDateTime: this.params.endDateTime,
        dateTimeWhole: '',
      }
    },
    created() {
      this.initData()
    },
    watch: {
      "params.startDateTime"(val) {
        this.startDateTime=val
        this.initData()
      },
      "params.endDateTime"(val) {
        this.endDateTime=val
        this.initData()
      }
    },
    methods: {
      initData(date) {
        // 获取完整的年月日 时分秒，以及默认显示的数组
        this.unit = ['年', '月', '日', '时', '分']
        this.dateTimePicker = new dateTimePicker(this.startDateTime, this.endDateTime, this.params.pText)
        let obj = this.dateTimePicker.render();
        let lastArray = obj.dateTimeArray;
        let lastTime = obj.dateTime;
        for (let i = 0; i < lastArray.length; i++) {
          lastArray[i] = lastArray[i].map(m => m + this.unit[i])
        }
        this.dateTimeArray = lastArray
        this.dateTime = lastTime
      },
      changeDateTime(e) {
        this.dateTime = e.detail.value
        const year = this.dateTimeArray[0][this.dateTime[0]].replace(/年/, '')
        const month = this.dateTimeArray[1][this.dateTime[1]].replace(/月/, '')
        const day = this.dateTimeArray[2][this.dateTime[2]].replace(/日/, '')
        const hour = this.dateTimeArray[3][this.dateTime[3]].replace(/时/, '')
        const minute = this.dateTimeArray[4][this.dateTime[4]].replace(/分/, '')
        this.dateTimeWhole = `${year}/${month}/${day} ${hour}:${minute}`
        this.$emit('getDateString', this.dateTimeWhole)
      },
      changeDateTimeColumn(e) {
        const { column, value } = e.detail
        this.$set(this.dateTime, column, value)
        this.dateTimePicker.setValue({ dateTimeArray: this.dateTimeArray, dateTime: this.dateTime })
        for (let i = 1; i < this.dateTime.length; i++) {
          if (column == i - 1) {
            for (let j = i; j < this.dateTime.length; j++) {
              this.$set(this.dateTime, j, 0)
            }
          }
          let arr = this.dateTimePicker.dispatch(i).map(m => m + this.unit[i])
          this.$set(this.dateTimeArray, i, arr)
        }
      },
    }
  }
</script>
<style lang="scss">
  .dateTimePicker {
    margin: 30rpx 0;

    .tui-picker-detail {
      height: 100rpx;
      background: #f7f7f7;
      border-radius: 10rpx;
      font-size: 32rpx;
      justify-content: space-between;
      box-sizing: border-box;

      .icon {
        width: 16rpx;
        height: 32rpx;
      }
    }
  }
</style>

引入 dateTimePicker.js

import { dateString } from '@/common/utils/index.js'
class BaseInfo {
  constructor() {
    this.newDate = new Date();
  }
  withData(param) {
    return parseInt(param) < 10 '0' + param : '' + param;
  }
  getLoopArray(start, end) {
    var start = start || 0;
    var end = end || 0;
    var array = [];
    for (var i = start; i <= end; i++) {
      array.push(this.withData(i));
    }
    return array;
  }
  formatArr(dateString) {
    return [...dateString.split(' ')[0].split('/'), ...dateString.split(' ')[1].split(':')]
  }
  beforeDateArr(disYear) {
    /*
     * 处理前
     * 获取当前时间
     */
    let year = this.newDate.getFullYear() - (disYear || 0)
    let month = this.newDate.getMonth() + 1
    let day = this.newDate.getDate()
    let hour = this.newDate.getHours()
    let minute = this.newDate.getMinutes()
    return [year, month, day, hour, minute]
  }
  afterDateArr() {
    /*
     * 处理后
     * 获取当前时间
     */
    let year = this.withData(this.newDate.getFullYear())
    let mont = this.withData(this.newDate.getMonth() + 1)
    let date = this.withData(this.newDate.getDate())
    let hour = this.withData(this.newDate.getHours())
    let minu = this.withData(this.newDate.getMinutes())
    return [year, mont, date, hour, minu];
  }
}

// 实现
class dateTimePicker extends BaseInfo {
  constructor(startDate, endDate, defaultDate) {
    super();
    this.dateTimeArray = null
    this.dateTime = null
    this.startDate = super.formatArr(startDate); // 开始时间
    this.endDate = endDate super.formatArr(endDate) : super.afterDateArr(); // 结束时间
    this.defaultDate = defaultDate super.formatArr(defaultDate) : this.endDate;
  }
  setValue(obj) {
    for (let key in obj) {
      this[key] = obj[key]
    }
  }
  /* 获取当前切换选择的日期值*/
  getCurDateInfo() {
    return this.dateTime && this.dateTimeArray {
      year: this.dateTimeArray[0][this.dateTime[0]],
      month: this.dateTimeArray[1][this.dateTime[1]],
      day: this.dateTimeArray[2][this.dateTime[2]],
      hour: this.dateTimeArray[3][this.dateTime[3]],
      second: this.dateTimeArray[4][this.dateTime[4]],
    } : {}
  }
  /* 获取月数组*/
  getMonths() {
    let array = []
    const year = (this.getCurDateInfo().year || this.defaultDate[0]).replace(/年/, '');
    if (this.startDate[0] == this.endDate[0]) {
      /* 
       * 开始的年和结束的年相同
       * 就取(开始月，结束月)
       */
      array = super.getLoopArray(parseInt(this.startDate[1]), parseInt(this.endDate[1]))
    } else {
      switch (year) {
        case this.startDate[0]:
          /* 开始年 */
          array = super.getLoopArray(parseInt(this.startDate[1]), 12)
          break;
        case this.endDate[0]:
          /* 结束年 */
          array = super.getLoopArray(1, parseInt(this.endDate[1]))
          break;
        default:
          array = super.getLoopArray(1, 12)
          break;
      }
    }

    return array;
  }
  /* 获取日数组*/
  getDays() {
    let array = []
    let lastDay = null
    const year = (this.getCurDateInfo().year || this.defaultDate[0]).replace(/年/, '');
    const month = (this.getCurDateInfo().month || this.defaultDate[1]).replace(/月/, '');
    const flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
    switch (month) {
      case '01':
      case '03':
      case '05':
      case '07':
      case '08':
      case '10':
      case '12':
        lastDay = 31
        break;
      case '04':
      case '06':
      case '09':
      case '11':
        lastDay = 30
        break;
      case '02':
        lastDay = flag 29 : 28
        break;
      default:
        array = '月份格式不正确，请重新输入！'
    }
    const afterDateArr = super.afterDateArr()
    const _start = year == this.startDate[0] && month == this.startDate[1]
    const _end = year == this.endDate[0] && month == this.endDate[1]
    if (this.startDate[0] == this.endDate[0] && this.startDate[1] == this.endDate[1]) {
      /*
       * 开始的年和结束的年相同，开始月和结束月相同
       * 就取(开始日，结束日)
       */
      array = super.getLoopArray(parseInt(this.startDate[2]), parseInt(this.endDate[2]))
    } else {
      if (_start) { // 开始年月
        array = super.getLoopArray(parseInt(this.startDate[2]), lastDay)
      } else if (_end) { // 结束年月
        array = super.getLoopArray(1, parseInt(this.endDate[2]))
      } else {
        array = super.getLoopArray(1, lastDay)
      }
    }

    return array;
  }

  /* 获取小时数组*/
  getHours() {
    let array = []
    const year = (this.getCurDateInfo().year || this.defaultDate[0]).replace(/年/, '');
    const month = (this.getCurDateInfo().month || this.defaultDate[1]).replace(/月/, '');
    const day = (this.getCurDateInfo().day || this.defaultDate[2]).replace(/日/, '');
    const _start = year == this.startDate[0] && month == this.startDate[1] && day == this.startDate[2]
    const _end = year == this.endDate[0] && month == this.endDate[1] && day == this.endDate[2]
    const _equal = this.startDate[0] == this.endDate[0] && this.startDate[1] == this.endDate[1] && this.startDate[
      2] == this.endDate[2]
    if (_equal) {
      /*
       * 开始的年月日和结束的年月日都相同
       * 就取(开始小时，结束小时)
       */
      array = super.getLoopArray(parseInt(this.startDate[3]), parseInt(this.endDate[3]))
    } else {
      if (_start) { // 开始年月日
        array = super.getLoopArray(parseInt(this.startDate[3]), 23)
      } else if (_end) { // 结尾年月日
        array = super.getLoopArray(0, parseInt(this.endDate[3]))
      } else {
        array = super.getLoopArray(0, 23)
      }
    }
    return array;
  }
  /* 获取分钟数组*/
  getMinutes(years, months, days, hours) {
    let array = []
    const year = (this.getCurDateInfo().year || this.defaultDate[0]).replace(/年/, '');
    const month = (this.getCurDateInfo().month || this.defaultDate[1]).replace(/月/, '');
    const day = (this.getCurDateInfo().day || this.defaultDate[2]).replace(/日/, '');
    const hour = (this.getCurDateInfo().hour || this.defaultDate[3]).replace(/时/, '');
    const _start = year == this.startDate[0] && month == this.startDate[1] && day == this.startDate[2] && hour == this
      .startDate[3]
    const _end = year == this.endDate[0] && month == this.endDate[1] && day == this.endDate[2] && hour == this
      .endDate[3]
    const _equal = this.startDate[0] == this.endDate[0] && this.startDate[1] == this.endDate[1] && this.startDate[
      2] == this.endDate[2] && this.startDate[3] == this.endDate[3]
    if (_equal) {
      /*
       * 开始的年月日时和结束的年月日时都相同
       * 就取(开始小时，结束小时)
       */
      array = super.getLoopArray(parseInt(this.startDate[4]), parseInt(this.endDate[4]))
    } else {
      if (_start) { // 开始年月日
        array = super.getLoopArray(parseInt(this.startDate[4]), 59)
      } else if (_end) { // 结尾年月日
        array = super.getLoopArray(0, parseInt(this.endDate[4]))
      } else {
        array = super.getLoopArray(0, 59)
      }
    }
    return array;
  }
  /*  */
  dispatch(index) {
    let arr = []
    switch (index) {
      case 0:
        arr = super.getLoopArray(this.startDate[0], this.endDate[0]);
        break;
      case 1:
        arr = this.getMonths();
        break;
      case 2:
        arr = this.getDays();
        break;
      case 3:
        arr = this.getHours();
        break;
      case 4:
        arr = this.getMinutes();
        break;
      default:
        break;
    }
    return arr
  }

  /* 初始默认数据 */
  render() {
    const dateTime = []
    const dateTimeArray = [
      [],
      [],
      [],
      [],
      []
    ];
    /*年月日 时分秒*/
    for (let i = 0; i < dateTimeArray.length; i++) {
      dateTimeArray[i] = this.dispatch(i)
    }
    dateTimeArray.forEach((current, index) => {
      const _index = current.indexOf(this.defaultDate[index])
      dateTime.push(_index == -1 0 : _index);
    });

    return {
      dateTimeArray,
      dateTime
    }
  }
}

export default dateTimePicker

该封装结合网上搜寻到的一些思路和逻辑，重新使用了class 类做的组件封装。
本人是为了需求，需要什么参数都是后期加上的，代码还能在做做优化，写的不好之处敬请指出哦~