<template>
<div>
<div class="block">
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator=""
start-placeholder=""
end-placeholder=""
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "今日",
onClick(picker) {
const end = new Date();
const start = new Date(new Date().setHours(0, 0, 0, 0));
console.log("23123", start, end);
picker.$emit("pick", [start, end]);
},
},
{
text: "昨日",
onClick(picker) {
const start = new Date();
start.setTime(start.getTime() - 24 * 60 * 60 * 1000);
start.setHours(0, 0, 0, 0);
const end = new Date();
end.setTime(end.getTime() - 24 * 60 * 60 * 1000);
end.setHours(23, 59, 59, 0);
picker.$emit("pick", [start, end]);
},
},
{
text: "本周",
onClick(picker) {
var end = new Date();
var week = end.getDay();
//一天的毫秒数
var millisecond = 1000 * 60 * 60 * 24;
//减去的天数
var minusDay = week != 0 ? week - 1 : 6;
//本周 周一
var monday = new Date(end.getTime() - minusDay * millisecond);
const start = new Date(monday);
start.setHours(0, 0, 0, 0);
console.log("2312", start, end);
picker.$emit("pick", [start, end]);
},
},
{
text: "上周",
onClick(picker) {
// 上周开始时间
const starta = new Date();
var first = starta.getDate() - starta.getDay() - 6;
var startDate = new Date(starta.setDate(first));
const start = new Date(startDate);
start.setHours(0, 0, 0, 0);
// 上周结束时间
var currentDate = new Date();
var firsts = currentDate.getDate() - currentDate.getDay() - 6;
var last = firsts + 6;
var endDate = new Date(currentDate.setDate(last));
const end = new Date(endDate);
end.setHours(23, 59, 59, 0);
picker.$emit("pick", [start, end]);
},
},
{
text: "本月",
onClick(picker) {
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
//获得当前年份4位年
let currentYear = currentDate.getFullYear();
//求出本月第一天
const start = new Date(currentYear, currentMonth, 1);
const end = new Date();
picker.$emit("pick", [start, end]);
},
},
{
text: "上月",
onClick(picker) {
let that = this;
//获取当前时间
var currentDate = new Date();
//获得当前月份0-11
var currentMonth = currentDate.getMonth();
//获得当前年份4位年
var currentYear = currentDate.getFullYear();
//获得上一个月的第一天
if (currentMonth == 0) {
currentMonth = 11; //月份为上年的最后月份
currentYear--; //年份减1
return new Date(currentYear, currentMonth, 1);
} else {
//否则,只减去月份
currentMonth--;
}
const start = new Date(currentYear, currentMonth, 1);
//获取当前时间
var currentDates = new Date();
//获得当前月份0-11
var currentMonths = currentDates.getMonth();
//获得当前年份4位年
var currentYears = currentDates.getFullYear();
//当为12月的时候年份需要加1
//月份需要更新为0 也就是下一年的第一个月
if (currentMonths == 11) {
currentYears++;
currentMonths = 0; //就为
} else {
//否则只是月份增加,以便求的下一月的第一天
currentMonths++;
}
//一天的毫秒数
var millisecond = 1000 * 60 * 60 * 24;
//求出上月的最后一天
var aa = new Date();
var thisMonth = aa.getMonth();
//获得当前年份4位年
var thisYear = aa.getFullYear();
//求出本月第一天
var firstDay = new Date(thisYear, thisMonth, 1);
var lastDay = new Date(firstDay.getTime() - millisecond);
const end = new Date(lastDay);
end.setHours(23, 59, 59, 0);
picker.$emit("pick", [start, end]);
},
},
{
text:'本年',
onClick(picker) {
//获取当前时间
var currentDate=new Date();
//获得当前年份4位年
var currentYear=currentDate.getFullYear();
//本年第一天
const start=new Date(currentYear,0,1);
//本年最后一天
const end=new Date(currentYear,11,31);
console.log("2312", start, end);
picker.$emit("pick", [start, end]);
}
},
{
text:'上年',
onClick(picker) {
//获取当前时间
var currentDate=new Date();
//获得当前年份4位年
var currentYear=currentDate.getFullYear()-1;
//本年第一天
const start=new Date(currentYear,0,1);
//本年最后一天
const end=new Date(currentYear,11,31);
console.log("2312", start, end);
picker.$emit("pick", [start, end]);
}
},
{
text:'1季度',
onClick(picker) {
//获取当前时间
var currentDate=new Date();
//获得当前年份4位年
var currentYear=currentDate.getFullYear();
//第一季度第一天
const start=new Date(currentYear,0,1);
//第一季度最后一天
const end=new Date(currentYear,2,31);
console.log("2312", start, end);
picker.$emit("pick", [start, end]);
}
},
{
text:'2季度',
onClick(picker) {
//获取当前时间
var currentDate=new Date();
//获得当前年份4位年
var currentYear=currentDate.getFullYear();
//第一季度第一天
const start=new Date(currentYear,3,1);
//第一季度最后一天
const end=new Date(currentYear,5,30);
console.log("2312", start, end);
picker.$emit("pick", [start, end]);
}
},
{
text:'3季度',
onClick(picker) {
//获取当前时间
var currentDate=new Date();
//获得当前年份4位年
var currentYear=currentDate.getFullYear();
const start=new Date(currentYear,6,1);
const end=new Date(currentYear,8,30);
console.log("2312", start, end);
picker.$emit("pick", [start, end]);
}
},
{
text:'4季度',
onClick(picker) {
//获取当前时间
var currentDate=new Date();
//获得当前年份4位年
var currentYear=currentDate.getFullYear();
const start=new Date(currentYear,9,1);
const end=new Date(currentYear,11,31);
console.log("2312", start, end);
picker.$emit("pick", [start, end]);
}
}
],
},
value1: "",
value2: "",
};
},
methods: {
/***
* 本月的第一天时间
*/
getBeginMonth() {
var aa = new Date();
var thisMonth = aa.getMonth();
//获得当前年份4位年
var thisYear = aa.getFullYear();
//求出本月第一天
var firstDay = new Date(thisYear, thisMonth, 1);
return firstDay;
},
getPriorMonthFirstDay(year, month) {
//年份为0代表,是本年的第一月,所以不能减
if (month == 0) {
month = 11; //月份为上年的最后月份
year--; //年份减1
return new Date(year, month, 1);
}
//否则,只减去月份
month--;
return new Date(year, month, 1);
},
},
};
</script>
<style>
.block{
width: 60px;
height: 50px;
overflow: hidden;
background: lightblue;
}
.block .el-picker-panel *[slot="sidebar"],
.el-picker-panel__sidebar {
position: absolute;
top: 100;
right: 0;
/* bottom: 0; */
width: 100%;
height: 20%;
/* display: flex; */
border-bottom: 2px solid #e4e4e4;
-webkit-box-sizing: border-box;
/* box-sizing: border-box; */
padding-top: 6px;
background-color: #ffffff;
overflow: auto;
}
.el-picker-panel__sidebar .el-picker-panel__shortcut {
width: 80px;
height: 35px;
line-height: 35px;
font-size: 14px;
text-align: center;
float: left;
z-index: 10000;
color: #9babc5;
}
.block .el-picker-panel *[slot="sidebar"] + .el-picker-panel__body,
.el-picker-panel__sidebar + .el-picker-panel__body {
margin-left: 0;
height: 410px;
width: 600px;
}
.el-date-range-picker__content.is-left,
.el-date-range-picker .el-picker-panel__content {
border-right: 1px solid #e4e4e4;
margin-top: 80px;
}
.el-popper[x-placement^="bottom"] {
/* margin-top: 12px; */
width: 600px;
}
.block .el-picker-panel__body {
top: 83px;
}
</style>
elementUI日期选择器快速选择 快捷选择（本周、上周、本月、上月、季度等）
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 因为日期选择器使用的地方较多，放在 mixins 里面使用比较方便； 正常日期范围也一样，就是把数据放出来即可； ...
- //本周一 echo date('Y-m-d', (time() - ((date('w') == 0 ? 7 :...
- 项目需求用到，以下代码有部分是根据iOS修改而来。 直接上代码了。 1. 获取当前时间 2. 获取当前时间的前一天...
