【vue 移动端】 日期选择器的选中值处理

涉及范围

• 知识点
  nvue、uniapp、uniapp日期选择插件、生命周期、uniapp弹窗插件等
• 开发工具
  Hbuilder

功能简述

• 页面有两个日期选择器，点击日期选择器，选择器会通过弹窗插件的特效弹出。用户根据需求选择起始日期和终止日期，点选时弹出的控件会关掉并获取选中值。为了用户体验，起始日期不能大于终止日期。

样图展示

思路

• 弹窗插件包裹日期选择插件，在日期选择插件上添加点击事件，点击事件绑定弹窗插件的open事件打开弹窗。
• 用户点选日期触发日期选择器的change事件，change事件中除了保存选中的日期外还需要添加关闭弹窗事件close。
• 为了确保每次数据按照点击位置进行定向数据更新，在两个选择器上绑定的open事件方法中携带一个flag数值：open（1）；open（2），后续可以通过对flag的数值进行判定选择的数据是起始还是终止日期。
• 此时还有一个bug，起始日期可以大于终止日期。这个就需要在数值保存时进行判定，如果起始值大于终止值，那么为了用户体验两者的数值应当互换。

部分代码

• 下面实现了基本的弹窗效果和日期选择

//日期选择器的点击事件，
open(flag){
	this.flag = flag;
	this.$refs.popup.open()  //弹窗插件的open方法，执行打开弹窗
},
//通过flag判断点击的对象，对应更新数据
changeStartDate(e) {
	let flag = this.flag;
	let endDate = this.endDate;
	let startDate = this.startDate;
	if(flag == 1){
		this.$refs.popup.close();
		this.startDate = e.fulldate;
	}else{
		this.$refs.popup.close();
		this.endDate = e.fulldate;
	}		
},

• 下面解决起始日期大于终止日期的问题，采用vue的updated生命周期对数据更改进行监测。

let startDate = this.startDate;
let endDate = this.endDate;
let date = "";
//这里通过条件控制，当两个日期都是非空条件下 进行比较，如果出现起始日期大于终止日期的情况
//就将两者的数据进行调换。
if(startDate != ""&&endDate != "" ){
	if((startDate > endDate)){
		date = startDate;
		this.startDate = endDate;
		this.endDate = date;
	}
}else{
	return;
}

• 这是图中使用到的日期插件和弹窗插件的引入：

	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'