描述
点击【确定】按钮进行验证,点击【清空】按钮,清空输入框中的数据,
时间范围不能超过3个月,并添加快捷选择今天、最近一周、最近一月、最近3个月,以下为代码。
tips:1、点击确定按钮之前,点击非组件table,可以收起日期选择框。
2、点击确定按钮之后,只要不满足条件,点击任何区域都不会收起日期选择组件,除非关闭浏览器。
3、如果要完善第一条,点击确定按钮之前,只要不满足条件,点击任何区域都不会收起日期选择组件,除非关闭浏览器这一操作方法,日期组件上添加change方法(没有尝试过,用change方法和用blur方法的区别是,blur方法满足第二条,用change方法的话,点击确定按钮会校验一次,再次点击确定按钮会校验通过,对于我的需求有bug,所以用了blur方法,有兴趣的朋友可以尝试一下两个方法,本人比较懒不想尝试)
时间组件代码
<el-date-picker
ref="datePickRef"
v-model="searchForm.queryTime"
clearable
type="datetimerange"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
:validate-event="true"
@blur="handleTimeRange"
/>
pickerOptions放在data中
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
const startTime = _this.$moment().format('YYYY-MM-DD 00:00');
const endTime = _this.$moment().format('YYYY-MM-DD HH:mm');
_this.searchForm.queryTime = [startTime, endTime];
_this.$refs.datePickRef.handleClose();
}
}, {
text: '最近一周',
onClick(picker) {
const end = _this.$moment()._d;
const start = new Date();
const time1 = _this.$moment(end).subtract(7, 'days').unix() * 1000;
start.setTime(time1);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = _this.$moment()._d;
const start = new Date();
const time1 = _this.$moment(start).subtract(1, 'months').unix() * 1000;
start.setTime(time1);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = _this.$moment()._d;
const start = new Date();
const time1 = _this.$moment(start).subtract(3, 'months').unix() * 1000;
start.setTime(time1);
picker.$emit('pick', [start, end]);
}
}]
}
handleTimeRange方法放在methods中
// 判断开始时间和结束时间的区间长度
handleTimeRange() {
if (!this.searchForm.queryTime) {
this.searchForm.queryTime = [];
} else {
const startTime = this.$moment(this.searchForm.queryTime[0]);
const endTime = this.$moment(this.searchForm.queryTime[1]);
const rangeMonth = endTime.diff(startTime, 'month', true);
if (rangeMonth > 3) {
this.$message.error('时间范围,时长必须小于等于3个月!');
this.$refs.datePickRef.focus();
} else {
this.$refs.datePickRef.handleClose();
}
}
},