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" /> 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" /> import common from '@/utils/common' const startDate = ref const endDate = ref const dateRange = ref const yearPicker = ref() // 年份筛选框ref const yearRange = ref // 日期快捷选项 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() } :deep(.el-date-editor) { width: 240px; height: 32px; border-radius: 4px; font-size: 12px !important; } 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 }二、common文件方法: