微信小程序自定义日期时间选择器

 html

<picker mode="multiSelector" @change="bindMultiPickerChange($event,1)" @columnchange='bindMultiPickerColumnChange($event,1)' 
               :value="multiIndex" :range="multiArray">
                <view class="uni-input" :class="receiveBeginTime ? 'uni-input-act' : ''">
                  {{ receiveBeginTime ? receiveBeginTime : '领券开始时间' }}
                </view>
              </picker>

 data

choose_year: '',
      multiIndex: [0, 0, 0, 0, 0],
      multiIndex2: [0, 0, 0, 0, 0],
      multiArray: [[], [], [], [], []],

 methods

// 获取时间日期，点击确定时调用
    bindMultiPickerChange: function (e,val) {
      if(val==1){
        this.multiIndex = e.detail.value
      }else{
        this.multiIndex2 = e.detail.value
      }
      const index = e.detail.value;
      const year = this.multiArray[0][index[0]];
      const month = this.multiArray[1][index[1]];
      const day = this.multiArray[2][index[2]];
      const hour = this.multiArray[3][index[3]];
      const minute = this.multiArray[4][index[4]];
      let data=year + '/' + month + '/' + day + ' ' + hour + ':' + minute;
      if(val==1){
        this.receiveBeginTime=year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
        this.info.receiveBeginTime=new Date(data).getTime()
      }else{
        this.receiveEndTime=year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
        this.info.receiveEndTime=new Date(data).getTime()
      }
    },
    bindMultiPickerColumnChange: function(e,val) {
      if (e.detail.column == 0) {
      	// 获取年份，为后续计算闰年做准备
        let choose_year = this.multiArray[e.detail.column][e.detail.value];
        this.choose_year = choose_year
      }
      if (e.detail.column == 1) {
        // 切换月份时，调整日的选择范围
        this.setDayArray(e.detail.value)
      }
      if(val==1){
        this.multiIndex[e.detail.column] = e.detail.value;
      }else{
        this.multiIndex2[e.detail.column] = e.detail.value;
      }
    },
    loopArray(start, end) {
      const list = []
      for (let i = start; i <= end; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        list.push("" + i);
      }
      return list
    },
    setDayArray(monthIndex, monthNum = null) {
      let num = monthNum || parseInt(this.multiArray[1][monthIndex]);
      if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) {
        //判断31天的月份
        this.multiArray[2] = this.loopArray(1, 31)
      } else if (num == 4 || num == 6 || num == 9 || num == 11) {
        //判断30天的月份
        this.multiArray[2] = this.loopArray(1, 30)
      } else if (num == 2) {
        //判断2月份天数
        let year = parseInt(this.choose_year);
        if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
          this.multiArray[2] = this.loopArray(1, 29)
        } else {
          this.multiArray[2] = this.loopArray(1, 28)
        }
      }
      this.$forceUpdate()
    },
    initDateTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      this.choose_year = year
      this.multiArray = [this.loopArray(year, year + 5), this.loopArray(1, 12), [], this.loopArray(0, 23), this.loopArray(0, 59)] // 分别为年、月、日、时、分的选择范围；其中年份范围从当前年 - 当前年加5
      this.setDayArray(0, month) // 计算当前月份的 日 的范围
      this.multiIndex = [0, month - 1, day - 1, hours, minutes] // 选择器内的选项值也初始化为当前的日期时间
      this.multiIndex2 = [0, month - 1, day - 1, hours, minutes] // 选择器内的选项值也初始化为当前的日期时间
    }