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