小程序自定义picker，时间选择：年月日小时

小程序自定义picker，时间选择：年月日小时,当前时间之前的时间不能选择（详细讲解）

效果图

html
mode=“multiSelector” 多列
bindcolumnchange 列改变时触发事件
bindchange 确定时触发的事件
val的值为选中的值下标
range的值如果为对象，比如{id:0,name:小明] 那么要加属性 rang-key=‘name’ name为对象里需要展示的属性名

        <picker mode="multiSelector" start='{{today}}' bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <view class="picker">
          {{askDate==""?"选择送达时间":askDate}}
        </view>
      </picker>

js

data:{
	askDate:"",//显示已选择的时间
    multiArray: [//四个数组，有四个选择项 年-月-日-小时
      ['2021', '2022', '2023','2024','2025','2026','2027','2028','2029','2030','2031'],
      ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
      ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
    ],
    multiIndex: [0, 0, 0, 0],//对应上面选择项，选中的下标
    normalMon:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],//正常的月份
    normalHour:["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],//正常的小时
    nowDay:[],//保存当前月份剩余的日期天
    nowMon:[],//保存当前年份剩余的月份
    nowHour:[]//保存当天剩余的小时
}

onLoad: function (options) {
	let page=this;
	//默认选中当前日期
	//获取当前的年-月-日-小时
    let time = new Date();
    let y = time.getFullYear();
    let m = time.getMonth() + 1;
    let d = time.getDate();
    let h=time.getHours();
    var day = new Date(y, m, 0);
    var daycount = day.getDate();//获取本月天数
    var days=[];
    var mons=[];
    var hours=[];
    //本月剩余天数 比如今天2.24号 days=[24,25,26,27,28]
    for(var i=0;i<=daycount-d;i++){
      days.push(d+i)
    }
    //本年剩余月份
    for(var j=0;j<=12-m;j++){
      mons.push(m+j)
    }
    //今天剩余小时
    for(var k=0;k<=24-h;k++){
      hours.push(h+k)
    }
    //赋值
    page.setData({
      ["multiArray[2]"]: days,
      ["multiArray[1]"]: mons,
      ["multiArray[3]"]: hours,
      nowDay:days,
      nowMon:mons,
      nowHour:hours,
    });
},
 //确定选择（组装数据)
  bindMultiPickerChange: function (e) {
    let date=this.data.multiArray;//四个选择的数组
    let index=this.data.multiIndex;//对应选中的下标
    //选择第几个年份的值 比如：date[0]是第一个数组（年）[index[0]]选择的下标
    var year=date[0][index[0]];
    var mon=date[1][index[1]];
    var day=date[2][index[2]];
    var hour=date[3][index[3]];
    var needdate=''+year+'-'+mon+'-'+day+' '+hour+':00'
    this.setData({
      multiIndex: e.detail.value,//当前选择的下标[0,0,1,0]
      askDate:needdate,//2020-2-24 16：00
    })
  },
  //列改变时
  bindMultiPickerColumnChange: function (e) {
    let that = this;
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    //e.detail.column是第几列、e.detail.value是选择的下标
    data.multiIndex[e.detail.column] = e.detail.value;
    //选择年月日时
    switch (e.detail.column) {
      case 0://第一列发生改变时 年
        switch (data.multiIndex[0]) {//switch 选中的数组的第1个值 年
          case 0://如果第一列选择的是第一个 下标为0时（即本年）
             data.multiArray[1] = that.data.nowMon;//月份为本年剩余的月份
             data.multiArray[2] = that.data.nowDay;//天数为本月剩余的天数
             data.multiArray[3] = that.data.nowHour;//小时为今天剩余的小时
            break;
          default://第一列选择的不是第一个
            data.multiArray[1] =  that.data.normalMon;正常月份 一年12个月
            data.multiArray[2] =  that.getDay(e.detail.value);选择的月的天数
            data.multiArray[3] =  that.data.normalHour;//正常一天24小时
            break;
        }
        //更改年份之后，月，日，小时 恢复选择下标为0的数
        data.multiIndex[1]=0;
        data.multiIndex[2]=0;
        data.multiIndex[3]=0;
      break; 
      case 1://第二列发生改变时 月
        switch (data.multiIndex[1]) { //switch 选中的数组的第二个值 月
          case 0://第二列 月选择的下标为0时 即本月
            data.multiArray[2] = that.data.nowDay;//本月剩余天数
            data.multiArray[3] = that.data.nowHour;//本天剩余小时
            break;
          default:
            data.multiArray[2] = that.getDay(e.detail.value);//获取选择月份的天数
            data.multiArray[3] = that.data.normalHour;//正常小时
            break;
        }
        //选择月份后，日期和小时自动恢复选择第一个
        data.multiIndex[2]=0;
        data.multiIndex[3]=0;
      break; 
      case 2:
        switch (data.multiIndex[2]) {
          case 0:
             data.multiArray[3] = that.data.nowHour;
            break;
          default:
            data.multiArray[3] =  that.data.normalHour;
            break;
        }
        data.multiIndex[3]=0;
      break; 
    }
    this.setData(data);
  },
  //获取月份的天数
  getDay: function (mon) {
    let daysOfMonth = [];
    var Year = this.data.multiArray[0][this.data.multiIndex[0]];//选择的年
    var mon = this.data.multiArray[1][this.data.multiIndex[1]];
    var day = new Date(Year, mon, 0);
    for (var i = 1; i <= daycount; i++) {
      daysOfMonth.push(i);
    };
    return daysOfMonth;
  },
  //end

逻辑有点复杂但是不难，每一步都很详细，仔细看可以看懂