el-date-picker日期快捷键（今日、本周、本月、上月、本季、本年）
图示
文章图片
文章图片
需要使用到快捷键的vue页面
html
今日
本周
本月
上月
本季
本年【el-date-picker日期快捷键（今日、本周、本月、上月、本季、本年）】script
/**
* 快捷键逻辑本来放在@/mixins/standard-list里的为了演示方便放在这里
* 其他代码省略
**/export default {
data() {
timeRange: [], // 时间区间---建单时间
timeRange1: [], // 时间区间---支付时间
},
watch: {
timeRange: {
handler (newV) {
if (newV instanceof Array) {
this.searchData.createTimeBegin = newV[0];
this.searchData.createTimeEnd = newV[1];
} else {
this.searchData.createTimeBegin = null;
this.searchData.createTimeEnd = null;
}
}
},
timeRange2: {
handler (newV) {
if (newV instanceof Array) {
this.searchData.payTimeBegin = newV[0];
this.searchData.payTimeEnd = newV[1];
} else {
this.searchData.payTimeBegin = null;
this.searchData.payTimeEnd = null;
}
}
},
},
methods: {
// 日期快捷键（默认绑定timeRange）
shortcuts(text, ref='timeRange'){
const start = new Date();
const end = new Date();
start.setHours(0);
start.setMinutes(0);
start.setSeconds(0);
end.setHours(23);
end.setMinutes(59);
end.setSeconds(59);
const month = start.getMonth()+1;
// 0-11, 月份加1，方便和大月、小月口诀对应
switch (text) {
case 'today':
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'this-week':
const today = start.getDate();
// 1-31
const weekday = start.getDay() || 7;
// 0-6, 若为0则改为7
start.setDate(today+(1-weekday));
end.setDate(today+(7-weekday));
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'this-month':
start.setDate(1);
if (month===1 || month===3 || month===5 || month===7 || month===8 || month===10 ||month===12) {
end.setDate(31);
}
if (month===4 || month===6 || month===9 || month===11) {
end.setDate(30);
}
if (month===2) {
const year = start.getFullYear();
if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {
end.setDate(29);
} else {
end.setDate(28);
}
}
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'last-month':
const lastMonth = start.getMonth() - 1;
// 0-11, 月份减1，得到上月，-1-10
if (lastMonth === -1) {
const year = start.getFullYear();
start.setFullYear(year - 1);
start.setMonth(11);
end.setFullYear(year - 1);
end.setMonth(11);
end.setDate(31);
// -1月份单写
} else {
start.setMonth(lastMonth);
end.setMonth(lastMonth);
}
start.setDate(1);
const tem = lastMonth+1
if (tem ===1 || tem===3 || tem===5 || tem===7 || tem===8 || tem===10) {
end.setDate(31);
}
if (tem===4 || tem===6 || tem===9 || tem===11) {
end.setDate(30);
}
if (tem===2) {
const year = start.getFullYear();
if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {
end.setDate(29);
} else {
end.setDate(28);
}
}
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'this-quarter':
const quarter = Math.floor((month%3 === 0 ? ( month/3 ) : ( month/3 + 1 )))
start.setDate(1);
if (quarter === 1) {
start.setMonth(0);
end.setMonth(2);
end.setDate(31);
}
if (quarter === 2) {
start.setMonth(3);
end.setMonth(5);
end.setDate(30);
}
if (quarter === 3) {
start.setMonth(6);
end.setMonth(8);
end.setDate(30);
}
if (quarter === 4) {
start.setMonth(9);
end.setMonth(11);
end.setDate(31);
}
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
case 'this-year':
start.setMonth(0);
start.setDate(1);
end.setMonth(11);
end.setDate(31);
this.$refs[ref].val = [start, end];
this.$refs[ref].changeVal();
break;
}
},
}
}推荐阅读
- 作业
- 20181026-日检视
- day15--Java常用类之日期相关类
- element|element ui日期组件设置默认时间
- 营销特训营成长日记4??
- go语言打印日期_专访Go语言布道师Dave Cheney（Go语言这十年，只能用“成功”一词总结...）
- vue日期时间工具类详解
- 行茶，正山小种
- IDEA中sout快捷键无效问题的解决方法
- 王丁益0107打卡情况【56/90】