element plus 日期组件el-date-picker增加时间日期范围,本周上周本月上月本季度上季度时间段。快捷选择 电脑版发表于：2025/5/13 11:41 ####代码如下： ``` <el-date-picker style="width: 100%" v-model="searchForm.dateRange" type="daterange" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" clearable /> ``` #### ts: ``` const shortcuts = [ { text: '本周', value: () => { const end = dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD'); const start = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD'); return [start, end]; }, }, { text: '上周', value: () => { const end = dayjs().add(-1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD'); const start = dayjs().add(-1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD'); return [start, end]; }, }, { text: '本月', value: () => { const start = dayjs().startOf('month').format('YYYY-MM-DD'); const end = dayjs().endOf('month').format('YYYY-MM-DD'); return [start, end]; }, }, { text: '上月', value: () => { const start = dayjs().add(-1, 'month').startOf('month').format('YYYY-MM-DD'); const end = dayjs().add(-1, 'month').endOf('month').format('YYYY-MM-DD'); return [start, end]; }, }, { text: '本季度', value: () => { return getQuarterDates(); }, }, { text: '上季度', value: () => { return getLastQuarterDates(); }, }, ]; // 计算本季度的开始和结束日期 function getQuarterDates() { // 获取当前日期 const now = dayjs(); // 获取当前季度（1-4） const quarter = Math.floor((now.month() + 3) / 3); // 获取当前年份 const year = now.year(); const quarterMonth = (quarter - 1) * 3; // 季度对应的第一个月（0-based） const startDate = dayjs(new Date(year, quarterMonth, 1)); const endDate = dayjs(new Date(year, quarterMonth + 3, 0)); // 下个月第0天即本月最后一天 return [startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD')]; } // 计算上季度的开始和结束日期 function getLastQuarterDates() { // 获取当前日期 const now = dayjs(); // 获取当前季度（1-4） const currentQuarter = Math.floor((now.month() + 3) / 3); // 获取当前年份 const currentYear = now.year(); const previousQuarter = currentQuarter === 1 ? 4 : currentQuarter - 1; const previousYear = currentQuarter === 1 ? currentYear - 1 : currentYear; const quarterMonth = (previousQuarter - 1) * 3; // 季度对应的第一个月（0-based） const startDate = dayjs(new Date(previousYear, quarterMonth, 1)); const endDate = dayjs(new Date(previousYear, quarterMonth + 3, 0)); // 下个月第0天即本月最后一天 return [startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD')]; } ```
