微信小程序的年月日-年月日选择器基于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"

bindchange="bindMultiPickerChange"

bindcolumnchange="bindMultiPickerColumnChange"

value="{{multiIndex}}"

range="{{multiArray}}"

>

时间

</picker>

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