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