element plus 日期组件el-date-picker增加时间日期范围,本周上周本月上月本季度上季度时间段。快捷选择

代码如下：

<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')];
}