一、封装方法 

/*** 默认开始和结束时间* @type {string[]}*/
import dayjs from 'dayjs'
export const defaultTime = ['00:00:00', '23:59:59']
/*** 设置日期组件 快捷方式* @type {({onClick(*): void, text: string}|{onClick(*): void, text: string}|{onClick(*): void, text: string}|{onClick(*): void, text: string})[]}*/
export const shortcuts = [{text: '明天',onClick(picker) {const date = new Date()date.setTime(date.getTime() + 3600 * 1000 * 24)picker.$emit('pick', date)},},{text: '今天',onClick(picker) {picker.$emit('pick', new Date())},},{text: '昨天',onClick(picker) {const date = new Date()date.setTime(date.getTime() - 3600 * 1000 * 24)picker.$emit('pick', date)},},{text: '一周前',onClick(picker) {const date = new Date()date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)picker.$emit('pick', date)},},
]/*** 日期 区间组件 快捷方式* @type {{shortcuts: [{onClick(*): void, text: string}, {onClick(*): void, text: string}, {onClick(*): void, text: string}]}}*/
export const shortcutsRange = [{text: '今天',onClick(picker) {let dayStart = new Date(new Date(new Date().toLocaleDateString()).getTime())let dayEnd = new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1)picker.$emit('pick', [dayStart, dayEnd])},},{text: '昨天',onClick(picker) {let dayStart = new Date(new Date(new Date().toLocaleDateString()).getTime() - 1 * 86400000)let dayEnd = new Date(new Date(new Date().toLocaleDateString()).getTime() - 1)picker.$emit('pick', [dayStart, dayEnd])},},{text: '本周',onClick(picker) {const dataValue = new Date()const year = dataValue.getFullYear()const month = dataValue.getMonth() + 1const 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 //本周周一的时间const prevWeekEnd = thisWeekStart + 7 * 86400000 - 1 //本周周日的时间const start = new Date(prevWeekStart) //开始时间const end = new Date(prevWeekEnd) //结束时间picker.$emit('pick', [start, end])},},{text: '上周',onClick(picker) {const dataValue = new Date()const year = dataValue.getFullYear()const month = dataValue.getMonth() + 1const 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 //上周周日的时间const start = new Date(prevWeekStart) //开始时间const end = new Date(prevWeekEnd) //结束时间picker.$emit('pick', [start, end])},},{text: '本月',onClick(picker) {const end = getCurrentMonthLast()const start = getCurrentMonthFirst()picker.$emit('pick', [start, end])function getCurrentMonthFirst() {let date = new Date(new Date(new Date().toLocaleDateString()).getTime() - 1 * 86400000)date.setDate(1)return date}// 获取当前月的最后一天function getCurrentMonthLast() {var date = new Date()var currentMonth = date.getMonth()var nextMonth = ++currentMonthvar nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)return new Date(nextMonthFirstDay - 1)}},},{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 = 12year = year - 1}if (month < 10) {month = '0' + month}let firstDayOfPreMonth = year + '-' + month + '-' + '01' + ' 00:00:00'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 = 12year = year - 1}if (month < 10) {month = '0' + month}const lastDay = new Date(year, month, 0)let lastDayOfPreMonth =year + '-' + month + '-' + lastDay.getDate() + ' 23:59:59'lastDayOfPreMonth = lastDayOfPreMonth.toString()return new Date(lastDayOfPreMonth)}},},{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: '最近一个月',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])},},{text: '最近半年',onClick(picker) {const end = new Date()const start = new Date()start.setMonth(start.getMonth() - 6)picker.$emit('pick', [start, end])},},{text: '最近一年',onClick(picker) {const end = new Date()const start = new Date()start.setFullYear(start.getFullYear() - 1)picker.$emit('pick', [start, end])},},
]/*** 日期 区间组件 快捷方式* @type {{shortcuts: [{onClick(*): void, text: string}, {onClick(*): void, text: string}, {onClick(*): void, text: string}]}}*/
export const shortcutsMonthRange = [{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(new Date().getFullYear(), 0)picker.$emit('pick', [start, end])},},{text: '最近六个月',onClick(picker) {const end = new Date()const start = new Date()start.setMonth(start.getMonth() - 6)picker.$emit('pick', [start, end])},},
]/*** 控制 只显示 今天之前的日期* @param time* @returns {boolean}*/
export const disabledTomorrowAfter = (time) => {return (time.getTime() >=new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1).getTime())
}export const disabledBeforeMonth = function (time) {return dayjs().subtract(3, 'month') >= time || time >= dayjs()
}
export const disabledBefore12Month = function (time) {return dayjs().subtract(12, 'month') >= time || time >= dayjs()
}export const disabledTodayBefore = (time) => {return (time.getTime() <=new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1).getTime())
}export const disabledMonthAfter = (time) => {return (time.getFullYear() > new Date().getFullYear() ||(time.getFullYear() === new Date().getFullYear() &&time.getMonth() > new Date().getMonth()))
}export const getLastDayOfMonth = (time) => {return time.get
}// 禁用今天及今天以后的日期
export const disabledTodayAfter = (time) => {return time.getTime() > Date.now() - 24 * 3600 * 1000
}// 禁用本月以及本月以后的月份
export const disabledMonthAndAfter = (time) => {return time.getTime() > Date.now() - dayjs().daysInMonth() * 24 * 3600 * 1000
}// 只显示今天以及今天以前一周的日期
export const displayTodayBeforeWeek = (time) => {// 当前时间是否在8点前,默认昨天，8点后，默认今天let isBeforeEight = dayjs(dayjs().format('YYYY-MM-DD HH:mm:ss')).isBefore(dayjs().format('YYYY-MM-DD 08:00:00'))let lessThanEight =time.getTime() > Date.now() ||time.getTime() < Date.now() - 7 * 24 * 3600 * 1000let moreThanEight =time.getTime() > Date.now() - 24 * 3600 * 1000 ||time.getTime() < Date.now() - 8 * 24 * 3600 * 1000return isBeforeEight ? moreThanEight : lessThanEight
}

二、使用

<template>       <el-date-pickersize="small"v-model="date2"type="daterange"format="yyyy-MM-dd"value-format="yyyy-MM-dd"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":clearable="false":picker-options="datepickerOptions"@change="date2Change"></el-date-picker>
</template><script>
import { displayTodayBeforeWeek,shortcuts } from '@/utilbiz/datepicker.js'export default {data() {return {datepickerOptions: {// 禁用日期disabledDate(time) {return displayTodayBeforeWeek(time)// 时间快捷键shortcuts：shortcuts},},}}
}
</script>