element的日期范围选择器快捷选择今日，昨日，本周，上周，本月，上个月，禁止选择当前日期之后的日期

@[TOC](element的日期范围选择器快捷选择今日，昨日，本周，上周，本月，上个月，禁止选择当前日期之后的日期)

 

<template>
<div class="card-data">
<el-date-picker
v-model="orderValue"
type="daterange"
align="center"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy 年 MM 月 dd 日 "
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
el-date-picker>
template>

 

pickerOptions: {
shortcuts: [{
text: '今日',
onClick (picker) {
const end = new Date()
const start = new Date()
picker.$emit('pick', [start, end])
}
},
{
text: '昨日',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
end.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
picker.$emit('pick', [start, end])
}
},
{
text: '本周',
onClick (picker) {
const start = new Date()
const end = new Date()
const nows = start.getDay() || 7 // 注意周日算第一天，如果周日查询本周的话，天数是0，所有如 果是0，默认设置为7
start.setTime(start.getTime() - 3600 * 1000 * 24 * ((nows - 1)))
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 end = gettimeEnd()
const start = gettimeStart()
picker.$emit('pick', [start, end])
function gettimeStart () {
const nowdays = new Date()
let year = nowdays.getFullYear()
let month = nowdays.getMonth()
if (month === 0) {
month = 12
year = year - 1
}
if (month < 10) {
month = '0' + month
}
let firstDayOfPreMonth = year + '-' + month + '-' + '01'
firstDayOfPreMonth = firstDayOfPreMonth.toString()
return new Date(firstDayOfPreMonth)
}
function gettimeEnd () {
const nowdays = new Date()
let year = nowdays.getFullYear()
let month = nowdays.getMonth()
if (month === 0) {
month = 12
year = year - 1
}
if (month < 10) {
month = '0' + month
}
const lastDay = new Date(year, month, 0)
let lastDayOfPreMonth = year + '-' + month + '-' + lastDay.getDate()
lastDayOfPreMonth = lastDayOfPreMonth.toString()
return new Date(lastDayOfPreMonth)
}
}
}],
disabledDate: (time) => { // 禁止选择当前日期之后的日期
return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
}