一、效果图
二、js:在utils下创建一个pickerTime.js文件
function registerEvent(picker, index) {
function setBackground(target) {
target.css({ "background-color": "#FD4845", color: "#fff" });
target
.siblings("button")
.css({ "background-color": "#FFF4F4", color: "#666" });
}
//点击某一个元素时手动添加第一次选中样式
const dom = $(picker.$el).find(".el-picker-panel__shortcut")[index];
setBackground($(dom));
$(picker.$el)
.find(".el-picker-panel__shortcut")
.on("click", function() {
setBackground($(this));
});
}
export const dataTime = {
today: {
text: "今日",
onClick(picker) {
registerEvent(picker, 0); // 选中样式
return picker.$emit("pick", [new Date(), new Date()]);
}
},
yesterday: {
text: "昨日",
onClick(picker) {
registerEvent(picker, 1);
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return picker.$emit("pick", [date, date]);
}
},
thisWeek: {
text: "本周",
onClick(picker) {
let end = new Date();
let week = end.getDay();
//一天的毫秒数
let millisecond = 1000 * 60 * 60 * 24;
//减去的天数
let minusDay = week != 0 ? week - 1 : 6;
//本周 周一
let monday = new Date(end.getTime() - minusDay * millisecond);
const start = new Date(monday);
start.setHours(0, 0, 0, 0);
registerEvent(picker, 2);
return picker.$emit("pick", [start, end]);
}
},
lastWeek: {
text: "上周",
onClick(picker) {
const starta = new Date();
let first = starta.getDate() - starta.getDay() - 6;
let startDate = new Date(starta.setDate(first));
const start = new Date(startDate);
start.setHours(0, 0, 0, 0);
// 上周结束时间
let currentDate = new Date();
let firsts = currentDate.getDate() - currentDate.getDay() - 6;
let last = firsts + 6;
let endDate = new Date(currentDate.setDate(last));
const end = new Date(endDate);
end.setHours(23, 59, 59, 0);
registerEvent(picker, 3);
return picker.$emit("pick", [start, end]);
}
},
thisMonth: {
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();
registerEvent(picker, 4);
return picker.$emit("pick", [start, end]);
}
},
lastMonth: {
text: "上月",
onClick(picker) {
let that = this;
//获取当前时间
let currentDate = new Date();
//获得当前月份0-11
let currentMonth = currentDate.getMonth();
//获得当前年份4位年
let 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);
//获取当前时间
let currentDates = new Date();
//获得当前月份0-11
let currentMonths = currentDates.getMonth();
//获得当前年份4位年
let currentYears = currentDates.getFullYear();
//当为12月的时候年份需要加1
//月份需要更新为0 也就是下一年的第一个月
if (currentMonths == 11) {
currentYears++;
currentMonths = 0; //就为
} else {
//否则只是月份增加,以便求的下一月的第一天
currentMonths++;
}
//一天的毫秒数
let millisecond = 1000 * 60 * 60 * 24;
//求出上月的最后一天
let aa = new Date();
let thisMonth = aa.getMonth();
//获得当前年份4位年
let thisYear = aa.getFullYear();
//求出本月第一天
let firstDay = new Date(thisYear, thisMonth, 1);
let lastDay = new Date(firstDay.getTime() - millisecond);
const end = new Date(lastDay);
end.setHours(23, 59, 59, 0);
registerEvent(picker, 5);
return picker.$emit("pick", [start, end]);
}
},
nearlyAMonth: {
text: "近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
registerEvent(picker, 6);
return picker.$emit("pick", [start, end]);
}
},
nearlyThreeMonths: {
text: "近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
registerEvent(picker, 7);
return picker.$emit("pick", [start, end]);
}
},
nearlySixMonths: {
text: "近6个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
registerEvent(picker, 8);
return picker.$emit("pick", [start, end]);
}
},
withinThisYear: {
text: "今年内",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
registerEvent(picker, 9);
return picker.$emit("pick", [start, end]);
}
}
};
三、html
<el-date-picker v-model="dateTime" style="height: 36px;width: 280px;padding:3px 15px" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChangeHandler" :picker-options="pickerOptions" popper-class="date-style" />
import { dataTime } from '@/utils/pickerTime'
data(){
dateTime: '',
pickerOptions: {
shortcuts: [dataTime.today,dataTime.yesterday,dataTime.thisWeek,dataTime.lastWeek,dataTime.thisMonth,dataTime.lastMonth,dataTime.nearlyAMonth,dataTime.nearlyThreeMonths,dataTime.nearlySixMonths,dataTime.withinThisYear]
},
},
methods:{
dateChangeHandler(){
if(!val){
// 点击自带清除时 val == null时 恢复未选中状态
$(`.date-style.el-picker-panel__body-wrapper .el-picker-panel__shortcut`).css({'background-color':'#FFF4F4','color':'#666'});
}
}
}
四、css:在styles下创建一个公共样式 public.scss
.date-style {
width: 800px !important;
.el-picker-panel__sidebar {
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
padding: 40px 18px 0 18px;
width: 180px;
.el-picker-panel__shortcut {
display: inline-block;
line-height: 26px;
background-color: #FFF4F4;
font-size: 13px;
color: #666666;
border-radius: 4px;
height: 26px;
width: 60px;
padding: 0;
text-align: center;
margin-bottom: 8px;
}
}
.el-picker-panel__body {
margin-left: 180px;
}
}
五、以上就是全部内容,因为为了快速修改了官方原有的样式,这里我还配合了JQuery,如果有不想用JQuery的童鞋也可以用原生JS,效果是一样的