一、頁面代碼：
<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
? }
)
