在实际业务的发开中，常常会遇到起始日期和结束日期的选择场景，一般业务逻辑中，起始日期不能大于结束日期，否则数据不合逻辑。如果能够控制起始日期和结束日期的选择范围，将是一种很好的交互体验，比如：开始日期选择的是2021-4-3，结束日期就只能选择2021-4-3之后的日期，之前的将被禁用无法选择。如果结束日期选择的是2021-4-3，那么开始日期只能选择2021-4-3之前的日期，之后的日期将被禁用无法选择。那么这种方式如何友好的控制呢？下面将根据不同业务场景进行实现。
一、起始日期和结束日期的选择范围组合
实现的完整代码如下：
/*=========== 1 模板部分===============*/
//开始日期
<el-date-picker clearable type="date" style="width:auto" v-model="editForm.startTime"
placeholder="开始日期"
:editable="false"
@focus="limtStartDate"
:picker-options="pickerOptionspicker1"
></el-date-picker>
// 结束日期
<el-date-picker clearable type="date" style="width:auto" v-model="editForm.endTime"
placeholder="结束日期"
:editable="false"
@focus="limtEndDate"
:picker-options="pickerOptionspicker2"
></el-date-picker>
/*=========== 2 data部分===============*/
export default {
data(){
return {
pickerOptionspicker1: {
disabledDate: null
},
pickerOptionspicker2: {
disabledDate: null
}
}
},
/*=========== 2 js方法部分===============*/
methods:{
limtStartDate() {
this.pickerOptionspicker1.disabledDate = time => {
if (this.editForm.endTime) {
let getTimestamp = new Date(this.editForm.endTime);
return time.getTime() > getTimestamp.getTime();
}
};
},
limtEndDate() {
this.pickerOptionspicker2.disabledDate = time => {
if (this.editForm.startTime) {
let getTimestamp = new Date(this.editForm.startTime);
return time.getTime() <= getTimestamp.getTime() - 1000 * 60 * 60 * 24;
}
};
}
}
}核心代码说明如下：
1.模板部分添加如下代码：
// 起始日期
@focus="startDate"
:picker-options="pickerOptionspicker1"
// 结束日期
@focus="endDate"
:picker-options="pickerOptionspicker2"2.data部分添加如下代码：
pickerOptionspicker1: {
disabledDate: null
},
pickerOptionspicker2: {
disabledDate: null
}3.js部分添加如下代码：
startDate() {
this.pickerOptionspicker1.disabledDate = time => {
if (this.editForm.endTime) {
let getTimestamp = new Date(this.editForm.endTime);
return time.getTime() > getTimestamp.getTime();
}
};
},
endDate() {
this.pickerOptionspicker2.disabledDate = time => {
if (this.editForm.startTime) {
let getTimestamp = new Date(this.editForm.startTime);
return time.getTime() <= getTimestamp.getTime() - 1000 * 60 * 60 * 24;
}
};
}二、日期区间范围选择
对于区间范围选择，首先需要有一个目标日期，该目标日期不能受起始和结束日期的影响，否则没法判定日期的区间范围，因此我们首先对区间范围数据源拷贝一份作为备用，如果目标日期是当前系统日期，则不考虑备份。那么，区间范围日期选择的场景是什么呢？比如：开始目标日期是2021-3-10，结束目标日期是2021-3-20，开始日期只能选择2021-3-10至2021-3-20的日期区间，两边禁用。如果开始日期选择的是2021-3-15，则结束日期只能选择2021-3-15至2021-3-20区间；如果结束日期选择了2021-3-18，则开始日期只能选择2021-3-10至2021-3-18的区间。具体的代码实现如下：
mounted(){
this.copyBase = JSON.parse(JSON.stringify(this.editForm)); // ①
},
methods:{
startDate() {
this.pickerOptionspicker1.disabledDate = time => {
if (this.editForm.endTime) {
let start = new Date(this.copyBase.startTime);//②
let getTimestamp = new Date(this.editForm.endTime);
return time.getTime() > getTimestamp.getTime()||time.getTime() < start.getTime();//③
}
};
},
endDate() {
this.pickerOptionspicker2.disabledDate = time => {
if (this.editForm.startTime) {
let getTimestamp = new Date(this.editForm.startTime);
let end = new Date(this.copyBase.endTime);//④
return (time.getTime() <= getTimestamp.getTime() - 1000 * 60 * 60 * 24|| time.getTime() >= end.getTime() + 1000 * 60 * 60 * 24); //⑤
}
};
}
}模板部分和第一种范围选择的模板一样，核心部分详细说明：
①.定义一个变量copyBase，将editForm深拷贝一份给copyBase，为了防止editForm变动而引起起始和结束值的改动（即防止目标值的变动）。
②③.获取拷贝的起始日期start，来限制锁日期起始的地方。
④⑤.同理，获取拷贝的结束日期end，来限制锁定日期结束的地方。
以上限制和锁定用户选择日期范围的方式，可以避免用户选错日期范围而造成数据无效，或者二次提醒/校验而拉低用户体验。
这种方式更直观的从交互层面上杜绝了用户选错日期范围而造成不可预估的问题，将大大提高人机交互体验。
原创文章，作者：Ferrycoln，如若转载，请注明出处：https://ms200.cn/archives/1820
Ferrycoln 
