uview picker组件时,mode=“time“ 时间类型,日期不允许选择当前日期之后的日期(例如出生年月)实现方法

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函数。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值