小程序 日期时间 多列选择器

<view>
  <picker  mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange" bindcancel ="pickerCancel" value="{{pickerIndex}}" range="{{pickerArray}}" range-key="{{'name'}}">
    <view>
      {{dateString}}
    </view>
  </picker>
</view>

// pages/time/time.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    pickerArray: [],//日期控件数据list
    pickerIndex: [],//日期控件选择的index
    chooseIndex: [],//日期控件确认选择的index
    chooseArray: [],//日期控件确认选择后的list
    dateString: '',//页面显示日期
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this =this;
    _this._onInit();
  },
  _onInit() {
    let date = new Date();
    if (this.data.date != null) {
      let str = this.data.date;
      str = str.replace(/-/g, "/");
      date = new Date(str);
    }
    let pickerArray = this.data.pickerArray;
    // console.log(date.getFullYear());
    //默认选择3年内
    let year = [];
    let startDate = date.getFullYear() - 1;
    let endDate = date.getFullYear() + 1;
    if (this.data.startDate != null) {
      //如果存在开始时间，则默认设置结束时间为2099
      startDate = this.data.startDate;
      endDate = 2099;
    }
    if (this.data.endDate != null && this.data.startDate == null) {
      //如果存在结束时间，不存在开始时间 则默认设置开始时间为1900
      endDate = this.data.endDate;
      startDate = 1900;
    }
    if (this.data.endDate != null && this.data.startDate != null) {
      endDate = this.data.endDate;
    }
    if (startDate > date.getFullYear() || endDate < date.getFullYear()) {
      this.setData({
        dateString: "默认日期不在时间范围内"
      })
      return;
    }
    for (let i = startDate; i <= endDate; i++) {
      year.push({ id: i, name: i + "年" });
    }
    // console.log(year);
    let month = [];
    for (let i = 1; i <= 12; i++) {
      month.push({ id: i, name: i + "月" });
    }
    // console.log(month);
    let dayNum = this._getNumOfDays(date.getFullYear(), date.getMonth() + 1);
    let day = [];
    for (let i = 1; i <= dayNum; i++) {
      day.push({ id: i, name: i + "日" });
    }
    // console.log(day);
    let time = [];
    for (let i = 0; i <= 23; i++) {
      if (i < 10) {
        time.push({ id: i, name: "0" + i + "时" });
      } else {
        time.push({ id: i, name: i + "时" });
      }
    }
    // console.log(time);
    let division = [];
    for (let i = 0; i <= 59; i++) {
      if (i < 10) {
        division.push({ id: i, name: "0" + i + "分" });
      } else {
        division.push({ id: i, name: i + "分" });
      }
    }
    // console.log(division);
    pickerArray[0] = year;
    pickerArray[1] = month;
    pickerArray[2] = day;
    pickerArray[3] = time;
    pickerArray[4] = division;
    let mdate = {
      date: date,
      year: date.getFullYear() + '',
      month: date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '',
      day: date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '',
      time: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + '',
      division: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ''
    }
    mdate.dateString = mdate.year + '-' + mdate.month + '-' + mdate.day + ' ' + mdate.time + ':' + mdate.division;
    this.setData({
      pickerArray,
      pickerIndex: [date.getFullYear() - startDate, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()],
      chooseIndex: [date.getFullYear() - startDate, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()],
      chooseArray: pickerArray,
      dateString: this.data.placeholder != null ? this.data.placeholder : mdate.dateString
    })
    // console.log(date);
    //设置placeholder属性后 初始化不返回日期
    if (this.data.placeholder == null) {
      this.triggerEvent('onPickerChange', mdate);
    }
    // console.log(this.data.pickerArray);
    // console.log(this._getNumOfDays(2018, 10));
  },
   /**
     *
     * 获取本月天数
     * @param {number} year
     * @param {number} month
     * @param {number} [day=0] 0为本月0最后一天的
     * @returns number 1-31
     */
    _getNumOfDays(year, month, day = 0) {
      return new Date(year, month, day).getDate()
    },
    pickerChange: function (e) {
      // console.log('picker发送选择改变，携带值为', e.detail.value)
      let indexArr = e.detail.value;
      // console.log(this.data.pickerArray[0][indexArr[0]].id + "\n" + this.data.pickerArray[1][indexArr[1]].id + "\n" + this.data.pickerArray[2][indexArr[2]].id);
      const year = this.data.pickerArray[0][indexArr[0]].id;
      const month = this.data.pickerArray[1][indexArr[1]].id;
      const day = this.data.pickerArray[2][indexArr[2]].id;
      const time = this.data.pickerArray[3][indexArr[3]].id;
      const division = this.data.pickerArray[4][indexArr[4]].id;
      let date = {
        date: new Date(year + '-' + month + '-' + day + ' ' + time + ':' + division),
        year: year + '',
        month: month < 10 ? '0' + month : month + '',
        day: day < 10 ? '0' + day : day + '',
        time: time < 10 ? '0' + time : time + '',
        division: division < 10 ? '0' + division : division + ''
      }
      date.dateString = date.year + '-' + date.month + '-' + date.day + ' ' + date.time + ':' + date.division;
      // console.log(date);
      this.setData({
        chooseIndex: e.detail.value,
        chooseArray: this.data.pickerArray,
        dateString: date.dateString
      })
      this.triggerEvent('onPickerChange', date);
    },
    pickerColumnChange: function (e) {
      // console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
      var data = {
        pickerArray: this.data.pickerArray,
        pickerIndex: this.data.pickerIndex
      };
      data.pickerIndex[e.detail.column] = e.detail.value;
      if (e.detail.column == 1) {
        let dayNum = this._getNumOfDays(data.pickerArray[0][data.pickerIndex[0]].id, e.detail.value + 1);
        let day = [];
        for (let i = 1; i <= dayNum; i++) {
          day.push({ id: i, name: i + "日" });
        }
        if (dayNum < data.pickerIndex[2] + 1) {
          data.pickerIndex[2] = dayNum - 1;
        }
        data.pickerArray[2] = day;
      }
      this.setData(data);
    },
    pickerCancel: function (e) {
      // console.log("取消");
      this.setData({
        pickerIndex: this.data.chooseIndex,
        pickerArray: this.data.chooseArray
      })
    },

})