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 }) varindex=this.data.multiIndex varyear=this.data.multiArray[0][index[0]] varmonth=this.data.multiArray[1][index[1]] varday=this.data.multiArray[2][index[2]] varyear2=this.data.multiArray[4][index[4]] varmonth2=this.data.multiArray[5][index[5]] varday2=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; varcolumn=e.detail.column; vararray=this.data.multiArray;//例array[0][index[0]]代表開始年份的值array[0]代表開始年份列表 varindex=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 }) }elseif(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 }) }elseif(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]]){ letmonthi=parseInt(array[1][index[1]]) array[5]=this.getmonth(monthi) if(array[5].length<=index[5]){//如果結束月份列表長度不足,顯示列表頭 array[5]=0 } //判斷一下月份,不判斷下標是因為兩個列表的長度很可能不同 letvalue=array[column][index[column]] if((value==4||value==6||value==9||value==11)&&index[column+1]==30){ array[2]=29 array[6]=29 }elseif(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 }) }elseif(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){ letyear=e?e:2010 letyears=[] for(leti=year;i<=newDate().getFullYear()+5;i++){ years.push(""+i); } returnyears }, getmonth(e){ letmonth=e?e:1 letmonths=[] for(leti=month;i<=12;i++){ if(i<10){ i="0"+i; } months.push(""+i); } returnmonths }, getday(d,m,y){ letdm=31 if(m==4||m==6||m==9||m==11){ dm=30 if(d==31){ d=30 } }elseif(m==2){ if(y&&((y%400==0)||(y%100!=0))&&(y%4==0)){ dm=29 }else{ dm=28 } if(d>28){ d=28 } } letdays=[] for(leti=d;i<=dm;i++){ if(i<10){ i="0"+i; } days.push(""+i); } returndays },

　　

微信小程式的雙時間選擇器基於picker的mode = multiSelector

<picker
mode="multiSelector"
bindchange="bindMultiPickerChange"
bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}"
range="{{multiArray}}"
>
時間

</picker>

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