uview版本:1.0
// 使用picker 的页面
//使用picker 组件的地方新增传值 :timeEnd="endTime"
<u-picker mode="time" v-model="birthdayShow" :params="timeParams" @confirm="timeConfirm" :timeEnd="endTime" ></u-picker>
export default {
data() {
return {
birthdayShow: true,
timeParams: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
endTime:{},
};
},
onShow() {
//默认最大日期为当前时间
this.endTime.year = new Date().getFullYear()
this.endTime.month = new Date().getMonth()+1
this.endTime.day = new Date().getDate()
},
},
找到uview 源码组件components u-picker
1.在data前 插入这三行代码
//最大终止日期
timeEnd:{
type: Object,
},
2.在watch监听里 添加调用函数 this.timeHandle()
3.methods 中添加函数timeHandle,在该函数中主要处理日期的最大值可选,如需要适配自己的业务逻辑,也可以在此函数中进行修改
timeHandle(){
if(this.mode !== 'time') return;
if(this.timeEnd.year) this.endYear = this.timeEnd.year;
if(this.timeEnd.month) {
if(this.endYear === this.year){
this.setMonths(this.timeEnd.month)
}else{
this.setMonths()
}
}
if(this.timeEnd.day) {
if(this.endYear === this.year){
this.setDays(this.timeEnd.day)
}else{
this.setDays()
}
}
},
4.在init 初始化函数中调用 this.timeHandle 函数
5.把setMonths 函数和 setDays函数 复制替换掉,其实只是加了一个传参num,其他逻辑还是依照之前uview封装好的逻辑在执行 代码在后面
// 设置picker的某一列值
init() {
this.valueArr = [];
this.reset = false;
if (this.mode == 'time') {
this.initTimeValue();
if (this.params.year) {
this.valueArr.push(0);
this.setYears();
}
if (this.params.month) {
this.valueArr.push(0);
this.setMonths();
}
if (this.params.day) {
this.valueArr.push(0);
this.setDays();
}
if (this.params.hour) {
this.valueArr.push(0);
this.setHours();
}
if (this.params.minute) {
this.valueArr.push(0);
this.setMinutes();
}
if (this.params.second) {
this.valueArr.push(0);
this.setSeconds();
}
} else if (this.mode == 'region') {
if (this.params.province) {
this.valueArr.push(0);
this.setProvinces();
}
if (this.params.city) {
this.valueArr.push(0);
this.setCitys();
}
if (this.params.area) {
this.valueArr.push(0);
this.setAreas();
}
} else if (this.mode == 'selector') {
this.valueArr = this.defaultSelector;
} else if (this.mode == 'multiSelector') {
this.valueArr = this.defaultSelector;
this.multiSelectorValue = this.defaultSelector;
}
this.$forceUpdate();
this.timeHandle(); //添加这一行代码
},
setYears() {
// 获取年份集合
this.years = this.generateArray(this.startYear, this.endYear);
// 设置this.valueArr某一项的值,是为了让picker预选中某一个值
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
},
//下面两个函数复制替换
setMonths(num=12) {
// this.months = this.generateArray(1, 12);
this.months = this.generateArray(1, num);
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
},
setDays(num) {
let totalDays = new Date(this.year, this.month, 0).getDate();
this.days = this.generateArray(1, num?num:totalDays);
let index = 0;
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
// 因为this.month和this.year变化时,会触发watch中的this.setDays(),导致this.valueArr.length计算有误
if (this.params.year && this.params.month) index = 2;
else if (this.params.month) index = 1;
else if (this.params.year) index = 1;
else index = 0;
// 当月份变化时,会导致日期的天数也会变化,如果原来选的天数大于变化后的天数,则重置为变化后的最大值
// 比如原来选中3月31日,调整为2月后,日期变为最大29,这时如果day值继续为31显然不合理,于是将其置为29(picker-column从1开始)
if(this.day > this.days.length) this.day = this.days.length;
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
},
然后就好了,正常在timeEnd 中传最大需要显示的年月日
总结一下步骤
使用uview1.0中的picker组件,实现日期最大可选值功能,官方文档不支持处理最大月,日值,通过修改源码的方式来实现次功能。具体操作步骤有以下几点:
1、在使用u-picker 组件的页面组件上 新增传参:timeEnd=“endTime”
2、在onShow 函数中给endTime中的值进行赋值
3、修改源码,接收timeEnd入参,新增函数 timeHandle,在该函数中处理年月日的最大显示
4、修改 timeHandle 中所调用的函数,加传参,使用原本的uview 防撞好的逻辑
5、在初始化函数中,watch中调用timeHandle函数。