记录微信小程序时间选择器改造

在需求提出的时候就看了下小程序API，发现小程序的时间picker默认mode 只有年月日或者分秒，没有直接的“年-月-日 时:分:秒”组件，于是就需要自己改造了，基于能参照第三方就不先自己造轮子的思想，先在网上找了找，发现https://blog.csdn.net/m0_38082783/article/details/78921283上面的思想挺好，于是对其加以改造，在时间段基础上满足了，最小时间，最大截止时间的选择：

wxml代码：

<view class="picker_wrap">
  <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{pickerArr}}">
    <view class="picker_detail">
       {{date}}
    </view>
  </picker>
  <image class="picker_rightarrow" src="../../images/right_arrow.svg"></image>
</view>

js代码块：

const { dateTimePicker, setDateTimeData } = require('./../../utils/dateTimePicker')
//默认最小年份、最大年份
const S_DATE = 2000;
const E_DATE = new Date().getFullYear();

properties: {
    datakey: {
      type: String,
      value: ''
    },
    initDate: {
      type: String,
      value: ''
    },
    minDate: {
      type: String,
      value: ''
    },
    maxDate: {
      type: String,
      value: ''
    }
 }

initPickerData() {
      let { minDate, maxDate, initDate } = this.data;
      let startYear = S_DATE, endYear = E_DATE, initDateTimeArr = [[], [], [], [], [], []];
      let initYear = new Date(initDate).getFullYear();
      this.setData({
        currentYear:initYear + ''
      })
      if (minDate) {
        startYear = new Date(minDate).getFullYear();
      }
      if(maxDate) {
        endYear = new Date(maxDate).getFullYear();
      }
      if (maxDate && initYear === new Date(maxDate).getFullYear()) {
        let temp = [];//临时存取当前时间索引数组
        let maxMonth = new Date(maxDate).getMonth() + 1;
        let maxDay = new Date(maxDate).getDate();
        let maxHour = new Date(maxDate).getHours();
        let maxMinute = new Date(maxDate).getMinutes();
        let maxSecond = new Date(maxDate).getSeconds();
        setDateTimeData(initDateTimeArr, startYear, endYear, 0);
        setDateTimeData(initDateTimeArr, 1, maxMonth, 1);
        setDateTimeData(initDateTimeArr, 1, maxDay, 2);
        setDateTimeData(initDateTimeArr, 0, maxHour, 3);
        setDateTimeData(initDateTimeArr, 0, maxMinute, 4);
        setDateTimeData(initDateTimeArr, 0, maxSecond, 5);
        console.log("初始化的数据：", initDateTimeArr)
        let tempArr = [...initDate.split(' ')[0].split('-'), ...initDate.split(' ')[1].split(':')];
        initDateTimeArr.forEach((current, index) => {
          temp.push(current.indexOf(tempArr[index]));
        });
        this.setData({
          dateTime: temp,
          pickerArr: initDateTimeArr
        })

      } else {
        let dateObj = dateTimePicker(startYear, endYear, initDate);
        let { dateTime, dateTimeArray } = dateObj;
        this.setData({
          dateTime,
          pickerArr: dateTimeArray
        });

      }
    },
    getDefaultData() {
      let timeArr = this.data.dateTime;
      let dateTime = this.setChangeDate(timeArr); // ["2020", "01", "15", "15", "32", "14"]
      //显示默认时间操作
      let resultDate = this.formatDateTime(dateTime); //2020-01-15 15:32:14
      this.setData({
        date: resultDate
      });
    },
    changeDateTime(e) {
      let array = e.detail.value; // [20, 0, 14, 15, 32, 14] 各列的索引值组成了一个数组
      console.log('日期变化', array)
      let dateTime = this.setChangeDate(array); // ["2020", "01", "15", "15", "32", "14"]
      let resultDate = this.formatDateTime(dateTime); //2020-01-15 15:32:14
      this.setData({
        dateTime: array,
        date: resultDate
      })
      let resultObj = {};
      resultObj[this.data.datakey] = resultDate;
      this.triggerEvent('getNewDate', resultObj)
    },
    setChangeDate(array) {
      let dateTime = [];
      this.data.pickerArr.forEach((current, index) => {
        dateTime.push(current[array[index]]);
      });
      return dateTime;
    },
    formatDateTime(dt) {
      if (Array.isArray(dt)) {
        let Y = dt[0]
        let M = dt[1]
        let D = dt[2]
        let H = dt[3]
        let MM = dt[4]
        let S = dt[5]
        return `${Y}-${M}-${D} ${H}:${MM}:${S}`
      }
    },
    changeDateTimeColumn(e) {
      let { minDate, maxDate, initDate, pickerArr } = this.data;
      let { column, value } = e.detail;
      let startYear = S_DATE, endYear = E_DATE, initDateTimeArr = [[], [], [], [], [], []];
      if (minDate) {
        startYear = new Date(minDate.replace(/-/g, '/')).getFullYear();
      }
      if (column === 0) {
        this.setData({
          currentYear: pickerArr[0][value]
        })
      }
      if (column === 1) {
        this.setData({
          currentMonth: pickerArr[1][value]
        })
      }
      if (column === 2) {
        this.setData({
          currentDay: pickerArr[2][value]
        })
      }
      if (column === 3) {
        this.setData({
          currentHour: pickerArr[3][value]
        })
      }
      if (column === 4) {
        this.setData({
          currentMinute: pickerArr[4][value]
        })
      }
      if (column === 5) {
        this.setData({
          currentSecond: pickerArr[5][value]
        })
      }
      const { currentYear, currentMonth, currentDay, currentHour, currentMinute, currentSecond } = this.data;
      const nowTime = `${currentYear}/${currentMonth}/${currentDay} ${currentHour}:${currentMinute}:${currentSecond}`;
      let nowTimeStramp = new Date(nowTime).getTime();
      let maxTimeStramp = new Date(maxDate.replace(/-/g, '/')).getTime();
      if (maxDate) {
        endYear = new Date(maxDate.replace(/-/g, '/')).getFullYear();
        let maxMonth = new Date(maxDate.replace(/-/g, '/')).getMonth() + 1;
        let maxDay = new Date(maxDate.replace(/-/g, '/')).getDate();
        let maxHour = new Date(maxDate.replace(/-/g, '/')).getHours();
        let maxMinute = new Date(maxDate.replace(/-/g, '/')).getMinutes();
        let maxSecond = new Date(maxDate.replace(/-/g, '/')).getSeconds();
        if (nowTimeStramp < maxTimeStramp) {
          setDateTimeData(initDateTimeArr, startYear, endYear, 0);
          if(parseInt(this.data.currentYear) === endYear){
            setDateTimeData(initDateTimeArr, 1, maxMonth, 1);
          }else{
            setDateTimeData(initDateTimeArr, 1, 12, 1);
          }
          if(parseInt(this.data.currentYear) === endYear && parseInt(this.data.currentMonth) === maxMonth) {
            setDateTimeData(initDateTimeArr, 1, maxDay, 2);
          }else {
            let dayArr = getMonthDay(this.data.currentYear,'' + this.data.currentMonth);
            initDateTimeArr[2] = dayArr;
          }
          if(parseInt(this.data.currentYear) === endYear && parseInt(this.data.currentMonth) === maxMonth && parseInt(this.data.currentDay) === maxDay) {
            setDateTimeData(initDateTimeArr, 0, maxHour, 3);
          }else {
            setDateTimeData(initDateTimeArr, 0, 23, 3);
          }
          if(parseInt(this.data.currentYear) === endYear && parseInt(this.data.currentMonth) === maxMonth && parseInt(this.data.currentDay) === maxDay && parseInt(this.data.currentHour) === maxHour) {
            setDateTimeData(initDateTimeArr, 0, maxMinute, 4);
          }else {
            setDateTimeData(initDateTimeArr, 0, 59, 4);
          }
          if(parseInt(this.data.currentYear) === endYear && parseInt(this.data.currentMonth) === maxMonth && parseInt(this.data.currentDay) === maxDay && parseInt(this.data.currentHour) === maxHour && parseInt(this.data.currentMinute) === maxMinute) {
            setDateTimeData(initDateTimeArr, 0, maxSecond, 5);
          }else {
            setDateTimeData(initDateTimeArr, 0, 59, 5);
          }

          this.setData({
            pickerArr: initDateTimeArr
          })
        } else {
          setDateTimeData(initDateTimeArr, startYear, endYear, 0);
          setDateTimeData(initDateTimeArr, 1, maxMonth, 1);
          setDateTimeData(initDateTimeArr, 1, maxDay, 2);
          setDateTimeData(initDateTimeArr, 0, maxHour, 3);
          setDateTimeData(initDateTimeArr, 0, maxMinute, 4);
          setDateTimeData(initDateTimeArr, 0, maxSecond, 5);
          this.setData({
            pickerArr: initDateTimeArr
          })
        }
        
      } else {
        let dateObj = dateTimePicker(startYear, endYear, initDate);
        let { dateTimeArray } = dateObj;
        this.setData({
          pickerArr: dateTimeArray
        });
      }

      console.log("更新后的数组数据：", initDateTimeArr, this.data.pickerArr);
      // 最小时间限制同理
    }


//在引入的datetimePicker 里面加入一个函数重新初始化picker数据
const setDateTimeData = function(dateArray,start,end,index){
  dateArray[index] = getLoopArray(start,end);
  return dateArray;
}

收工！！！