微信小程序的年月日-年月日选择器基于picker的mode = multiSelector日期范围

const date = new Date();
const years = [];
const months = [];
const days = [];
const years2 = [];
const months2 = [];
const days2 = [];
const yearIndex = date.getFullYear()-2010
const monthIndex = date.getMonth()
const dayIndex = date.getDate() - 1 
//获取年 i是起始年份, i<=结束年份(当前年份+5)
for (let i = 2010; i <= date.getFullYear() + 5 ; i++) {
    years.push("" + i);
}
//获取月份
for (let i = 1; i <= 12; i++) {
    if (i < 10) {
        i = "0" + i;
    }
    months.push("" + i);
}
//获取日期
for (let i = 1; i <= 31; i++) {
    if (i < 10) {
        i = "0" + i;
    }
    days.push("" + i);
}
//获取第二行年份
for (let i = 2010; i <= date.getFullYear() + 5 ; i++) {
    years2.push("" + i);
}
//获取第二行月份
for (let i = 1; i <= 12; i++) {
    if (i < 10) {
        i = "0" + i;
    }
    months2.push("" + i);
}
//获取第二行日期
for (let i = 1; i <= 31; i++) {
    if (i < 10) {
        i = "0" + i;
    }
    days2.push("" + i);
}
data: {
    date: '2016-09-01',
    time: '',
    multiArray: [years, months, days,"-", years2, months2, days2],
    multiIndex: [yearIndex,0,0,0, yearIndex,monthIndex,dayIndex],
  },
 bindMultiPickerChange(e) {
    console.log("1111111111");
    this.setData({
      multiIndex:e.detail.value
    })
    var index = this.data.multiIndex
    var year = this.data.multiArray[0][index[0]]
    var month = this.data.multiArray[1][index[1]]
    var day = this.data.multiArray[2][index[2]]
    var year2 = this.data.multiArray[4][index[4]]
    var month2 = this.data.multiArray[5][index[5]]
    var day2 = this.data.multiArray[6][index[6]]
    console.log(this.data.multiArray);
    console.log(index);
    this.setData({
      starttime: year + '-' + month + '-' + day,
      endtime: year2 + '-' + month2 + '-' + day2,
      showCanvas: false
    });
    console.log(year + '-' + month + '-' + day);
    console.log(year2 + '-' + month2 + '-' + day2);
    this.getIndexData();
  },
  bindMultiPickerColumnChange(e) {
    //获取年份
    var _this = this;
    var column = e.detail.column;
    var array = this.data.multiArray;  //例 array[0][index[0]] 代表开始年份的值 array[0]代表开始年份列表
    var index = this.data.multiIndex ;  // index[0] 代表开始年份的下标
    index[column] = e.detail.value;
    this.setData({
      multiIndex:index
    })
    if(column == 0){
        //修改开始年份需要同步更新结束年份列表,为了不出现显示bug,还得同步更新点开始日期列表
        array[2] = this.getday(1,array[1][index[1]],array[0][index[0]])
        array[4] = this.getyear(array[0][index[0]])
        if(array[4].length<=index[4]){//如果结束年份列表长度不足,显示列表头
          index[4] = 0;
          this.setData({
            multiIndex:index
          })
        }
        if(array[1][index[1]] == array[5][index[5]]){  //如果月份相同,同步结束日期列表
          array[6] = this.getday(index[2]+1,array[5][index[5]],array[4][index[4]])
        }
        _this.setData({
          multiArray:array
        })
    }else if(column == 4){
        //修改结束年份需要修改 结束日期列表 和 结束月份列表,如果 开始年份和结束年份 一致,开始月份不能小于结束月份,
        if(array[0][index[0]] == array[4][index[4]] && array[1][index[1]] > array[5][index[5]]){
          array[5] = this.getmonth(index[1]+1)
            if(array[1][index[1]] >= array[5][index[5]]){ //修改了结束月份列表后,判断结束日期列表如何修改
              array[6] = this.getday(index[2]+1,array[5][index[5]],array[4][index[4]])
            }else{
              array[6] = this.getday(1,array[5][index[5]],array[4][index[4]])
            }
        }else{  //如果开始年份小于结束年份,需要显示所有月份和所有日期
          array[5] = this.getmonth()
          array[6] = this.getday(1,array[5][index[5]],array[4][index[4]])
        }
        _this.setData({
          multiArray:array
        })
    }else if(column == 1 || column == 5 ){ //月份发生改变,响应的日期列表也要改变
        array[column+1] = this.getday(1,array[column][index[column]],array[column-1][index[column-1]])
        //年份相同的时候,开始月份不能大于结束月份
        if(array[0][index[0]] == array[4][index[4]] ){
            let monthi = parseInt(array[1][index[1]])
            array[5] = this.getmonth(monthi)
            if(array[5].length<=index[5]){//如果结束月份列表长度不足,显示列表头
              array[5] = 0
            }
            //判断一下月份,不判断下标是因为两个列表的长度很可能不同
            let value = array[column][index[column]]
            if((value == 4 || value == 6 || value == 9 || value == 11) && index[column+1] == 30 ){
              array[2] = 29
              array[6] = 29
            }else if(value == 2 && index[column+1] > 27){
              array[2] = 27
              array[6] = 27
            }
            //修改结束日期列表
            if(array[1][index[1]] == array[5][index[5]]){
              array[6] = this.getday(array[2][index[2]],array[5][index[5]],array[4][index[4]])
            }
        }
        _this.setData({
          monthIndex:index,
           multiArray:array
        })
    }else if(column == 2 && array[0][index[0]] == array[4][index[4]] && array[1][index[1]] == array[5][index[5]]){
        //如果年份和月份都相同,同步结束日期
        array[6] = this.getday(array[2][index[2]],array[1][index[1]],array[0][index[0]])
        if(array[6].length<=index[6]){//如果结束日期列表长度不足,显示列表头
          index[6] = 0
        }
        _this.setData({
          multiArray:array
       })
    }
    
    }, getyear(e){
      let year = e?e:2010
      let years = []
      for (let i = year; i <= new Date().getFullYear() + 5 ; i++) {
          years.push("" + i);
      }
      return years
    },
    getmonth(e){
      let month = e?e:1 
      let months = []
      for (let i = month; i <= 12; i++) {
          if (i < 10) {
              i = "0" + i;
          }
          months.push("" + i);
      }
      return months
    },
    getday(d,m,y){ 
      let dm = 31
      if (m == 4 || m == 6 || m == 9 || m == 11){
          dm = 30
          if(d == 31){
              d = 30
          }
      }else if( m == 2 ){
          if(y&&((y % 400 == 0) || (y % 100 != 0)) && (y % 4 == 0)){
              dm = 29
          }else{
              dm = 28
          }
          if(d > 28){
              d = 28
          }
      }
      let days = []
      for (let i = d; i <= dm; i++) {
          if (i < 10) {
              i = "0" + i;
          }
          days.push("" + i);
      }
      return days
    },

  

微信小程序的双时间选择器基于picker的mode = multiSelector

<picker
mode="multiSelector"
bindchange="bindMultiPickerChange"
bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}"
range="{{multiArray}}"
>
时间
</picker>

来源:https://blog.csdn.net/weixin_41887529/article/details/88865472

 

posted @ 2020-07-15 18:06  小小强学习网  阅读(428)  评论(0编辑  收藏