vue3+element-plus el-date-picker日期、年份筛选设置本周、本月、近3年等快捷筛选
一、页面代码：
<template>
<!-- 日期范围筛选框 -->
<el-date-picker
v-model="dateRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="shortcuts"
placement="bottom-start"
:editable="false"
:disabled-date="disabledDate"
@change="changeDate"
class="date-select"
/>
<!-- 年份范围筛选框 -->
<el-date-picker
v-model="yearRange"
value-format="YYYY"
type="yearrange"
range-separator="至"
start-placeholder="开始年份"
end-placeholder="结束年份"
:shortcuts="shortcuts1"
placement="bottom-start"
:editable="false"
:disabled-date="disabledYear"
@change="changeYear"
@clear="changeYear1"
class="date-select"
ref="yearPicker"
/>
</template>
<script setup lang="ts">
import common from '@/utils/common'
const startDate = ref<any>() // 开始时间
const endDate = ref<any>() //结束时间
const dateRange = ref<any>([]) // 日期范围值
const yearPicker = ref() // 年份筛选框ref
const yearRange = ref<any>([]) // 年份范围值
// 日期快捷选项
const shortcuts = [
{
text: '今日',
value: () => {
const end = new Date()
const start = new Date()
return [start, end]
}
},
{
text: '本周',
value: () => {
const end = new Date()
const start = new Date()
start.setDate(start.getDate() - start.getDay() + 1)
start.setHours(0, 0, 0, 0) // 将时间设置为当天时间的0点
return [start, end]
}
},
{
text: '本月',
value: () => {
const end = new Date()
const start = new Date(end.getFullYear(), end.getMonth(), 1) // 这个月1号
return [start, end]
}
}
]
// 年份快捷选项
const shortcuts1 = [
{
text: '今年',
value: [new Date(), new Date()]
},
{
text: '近3年',
value: () => {
const end = new Date()
const start = new Date(
new Date().setFullYear(new Date().getFullYear() - 2) // 设置开始时间为当前时间前2年（包含当前年）
)
return [start, end]
}
},
{
text: '近5年',
value: () => {
const end = new Date()
const start = new Date(
new Date().setFullYear(new Date().getFullYear() - 4) // 设置开始时间为当前时间前4年（包含当前年）
)
return [start, end]
}
}
]
// 初始化设置默认7天日期
const initTime = () => {
startDate.value = common.formatDate(
new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000),
'yyyy-MM-dd'
)
endDate.value = common.formatDate(new Date(), 'yyyy-MM-dd')
dateRange.value = [startDate.value, endDate.value]
}
// 控制当前日期之后不能选
const disabledDate = (time: any) => {
return time.getTime() > new Date().getTime()
}
// 改变日期
const changeDate = (value: any) => {
if (value) {
dateRange.value = toRaw(value)
startDate.value = dateRange.value[0]
endDate.value = dateRange.value[1]
} else {
dateRange.value = toRaw(value)
startDate.value = ''
endDate.value = ''
}
}
// 控制指定年份不能选（可选2019年到当前年）
const disabledYear = (time: any) => {
const year = time.getFullYear()
return year < 2019 || year > new Date().getFullYear()
}
// 改变年份
const changeYear = (value: any) => {
if (value) {
if (yearPicker.value) {
yearPicker.value.blur()
}
yearRange.value = toRaw(value)
}
}
// 清空时间
const changeYear1 = () => {
yearRange.value = []
}
onMounted(() => {
initTime()
}
</script>
<style lang="less" scoped>
:deep(.el-date-editor) {
width: 240px;
height: 32px;
border-radius: 4px;
font-size: 12px !important;
}
</style>
二、common文件方法：
formatDate: function (date: any, format: any) {
let v = ''
if (typeof date === 'string' || typeof date !== 'object') {
return
}
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const weekDay = date.getDay()
const ms = date.getMilliseconds()
let weekDayString = ''
if (weekDay === 1) {
weekDayString = '星期一'
} else if (weekDay === 2) {
weekDayString = '星期二'
} else if (weekDay === 3) {
weekDayString = '星期三'
} else if (weekDay === 4) {
weekDayString = '星期四'
} else if (weekDay === 5) {
weekDayString = '星期五'
} else if (weekDay === 6) {
weekDayString = '星期六'
} else if (weekDay === 0) {
weekDayString = '星期日'
}
v = format
// Year
v = v.replace(/yyyy/g, year)
v = v.replace(/YYYY/g, year)
v = v.replace(/yy/g, (year + '').substring(2, 4))
v = v.replace(/YY/g, (year + '').substring(2, 4))
// Month
const monthStr = '0' + month
v = v.replace(/MM/g, monthStr.substring(monthStr.length - 2))
// Day
const dayStr = '0' + day
v = v.replace(/dd/g, dayStr.substring(dayStr.length - 2))
// hour
const hourStr = '0' + hour
v = v.replace(/HH/g, hourStr.substring(hourStr.length - 2))
v = v.replace(/hh/g, hourStr.substring(hourStr.length - 2))
// minute
const minuteStr = '0' + minute
v = v.replace(/mm/g, minuteStr.substring(minuteStr.length - 2))
// Millisecond
v = v.replace(/sss/g, ms)
v = v.replace(/SSS/g, ms)
// second
const secondStr = '0' + second
v = v.replace(/ss/g, secondStr.substring(secondStr.length - 2))
v = v.replace(/SS/g, secondStr.substring(secondStr.length - 2))
// weekDay
v = v.replace(/E/g, weekDayString)
return v
}