@[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 }