DatePicker 日期选择器 快捷方法，今天，昨天，本周，上周，本月 ，上月，本季度，上季度，本年和上年脚本
作者：互联网
需求就是日期选择需要快捷方法，并且需要这些选项
今天，昨天，本周，本月，上月，本季度，上季度，本年，上年，最近7天，最近30天。
网上找了几个，然后综合了一下，基本满足了需求功能要求，
上代码
<el-form-item label="时间段" prop="platformName">
<el-date-picker
v-model="queryParams.dateRange"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
快捷脚本
pickerOptions: {
shortcuts: [
{
text: "今天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
picker.$emit("pick", [start, end]);
},
},
{
text: "昨天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近7天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近30天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "本周",
onClick(picker) {
const end = new Date();
const start = new Date();
const nows = start.getDay()||7 //注意周日算第一天，如果周日查询本周的话，天数是0，所有如 果是0，默认设置为7
start.setTime(start.getTime() - 3600 * 1000 * 24 * ((nows - 1)));
//start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "上周",
onClick(picker) {
const dataValue = new Date();
const year = dataValue.getFullYear();
const month = dataValue.getMonth() + 1;
const day = dataValue.getDate();
var thisWeekStart; //本周周一的时间
if (dataValue.getDay() == 0) {
//周天的情况；
thisWeekStart =
new Date(year + "/" + month + "/" + day).getTime() -
(dataValue.getDay() + 6) * 86400000;
} else {
thisWeekStart =
new Date(year + "/" + month + "/" + day).getTime() -
(dataValue.getDay() - 1) * 86400000;
}
const prevWeekStart = thisWeekStart - 7 * 86400000; //上周周一的时间
const prevWeekEnd = thisWeekStart - 1 * 86400000; //上周周日的时间
const start = new Date(prevWeekStart); //开始时间
const end = new Date(prevWeekEnd); //结束时间
picker.$emit("pick", [start, end]);
},
},
{
text: "本月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
picker.$emit("pick", [start, end]);
},
},
{
text: "上月",
onClick(picker) {
const start = new Date();
const end = new Date(start);
end.setMonth(start.getMonth());
start.setMonth(start.getMonth() - 1);
end.setDate(0);
start.setDate(1);
picker.$emit("pick", [start, end]); //https://blog.csdn.net/holily_/article/details/105990614
},
},
{
text: "本季度",
onClick(picker) {
var y = new Date().getFullYear(); //当前年份
var m = new Date().getMonth(); //当前月份
var q = parseInt(m / 3); //当前季度
var qs = new Date(y, (q - 0) * 3, 1); //上一季度的开始日期
// var qe = new Date(y, (q+1) * 3, 0); //上一季度的结束日期
var qe = new Date(); //动态
//var qe = new Date(y, (q+1) * 3, 0); //上一季度的结束日期
// var currentDate = new Date()
// var currentYear = currentDate.getFullYear()
// var currentMonth = currentDate.getMonth()
// var start = ''
// var end = ''
// if (currentMonth == 0 || currentMonth == 1 || currentMonth == 2) {
// /* 第一季度 */
// start = new Date(currentYear, 0, 1)
// // end = new Date(currentYear, 2, 31)
// end = new Date()
// }
// if (currentMonth == 3 || currentMonth == 4 || currentMonth == 5) {
// /* 第二季度 */
// start = new Date(currentYear, 3, 1)
// //end = new Date(currentYear, 5, 30)
// end = new Date()
// }
// if (currentMonth == 6 || currentMonth == 7 || currentMonth == 8) {
// /* 第三季度 */
// start = new Date(currentYear, 6, 1)
// // end = new Date(currentYear, 8, 30)
// end = new Date()
// }
// if (
// currentMonth == 9 ||
// currentMonth == 10 ||
// currentMonth == 11
// ) {
// /* 第四季度 */
// start = new Date(currentYear, 9, 1)
// // end = new Date(currentYear, 11, 31)
// end = new Date()
// }
//end.setHours(23, 59, 59, 0)
picker.$emit('pick', [qs, qe])
//https://blog.csdn.net/weixin_44683763/article/details/120481591
},
},
{
text: "上季度",
onClick(picker) {
var y = new Date().getFullYear(); //当前年份 https://zhidao.baidu.com/question/1388556289703065980.html 最简单的方法大神就是大神，简单，而且准确
var m = new Date().getMonth(); //当前月份
var q = parseInt(m / 3); //当前季度
var qs = new Date(y, (q - 1) * 3, 1); //上一季度的开始日期
var qe = new Date(y, q * 3, 0); //上一季度的结束日期
// var currentDate = new Date()
// var currentYear = currentDate.getFullYear()
// // 上季度
// var currentMonth = currentDate.getMonth() - 3
// var start = ''
// var end = ''
// if (currentMonth == 0 || currentMonth == 1 || currentMonth == 2) {
// /* 第一季度 */
// start = new Date(currentYear, 0, 1)
// end = new Date(currentYear, 2, 31)
// }
// if (currentMonth == 3 || currentMonth == 4 || currentMonth == 5) {
// /* 第二季度 */
// start = new Date(currentYear, 3, 1)
// end = new Date(currentYear, 5, 30)
// }
// if (currentMonth == 6 || currentMonth == 7 || currentMonth == 8) {
// /* 第三季度 */
// start = new Date(currentYear, 6, 1)
// end = new Date(currentYear, 8, 30)
// }
// if (
// currentMonth == 9 ||
// currentMonth == 10 ||
// currentMonth == 11
// ) {
// /* 第四季度 */
// start = new Date(currentYear, 9, 1)
// end = new Date(currentYear, 11, 31)
// }
//end.setHours(23, 59, 59, 0)
picker.$emit('pick', [qs, qe])
},
},
{
text: "本年",
onClick(picker) {
const end = new Date();
const start = new Date().getFullYear();
const startYear = new Date(start, 0, 1);
picker.$emit("pick", [startYear, end]);
},
},
{
text: "上年",
onClick(picker) {
//获取当前时间
let currentDate = new Date()
//获得当前年份4位年
let currentYear = currentDate.getFullYear() - 1
//本年第一天
const start = new Date(currentYear, 0, 1)
//本年最后一天
const end = new Date(currentYear, 11, 31)
//end.setHours(23, 59, 59, 0)
picker.$emit('pick', [start, end])
},
},
// {
// text: "最近一周",
// onClick(picker) {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
// picker.$emit("pick", [start, end]);
// },
// },
// {
// text: "最近一个月",
// onClick(picker) {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
// picker.$emit("pick", [start, end]);
// },
// },
// {
// text: "最近三个月",
// onClick(picker) {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
// picker.$emit("pick", [start, end]);
// },
// },
],
},
效果图
标签：DatePicker,picker,end,本季度,start,Date,new,选择器,const 来源： https://www.cnblogs.com/xiaohuasan/p/15908038.html