supervision-vue/src/components/date-time-range-picker-ext.vue

<template>
    <el-date-picker
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        :shortcuts="shortcuts"
        :unlink-panels="true"
    />
</template>
<script setup>
const shortcuts = [
    {
        text: "今天",
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0, 0);
            return [start, end];
        },
    },
    {
        text: "近一周",
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setDate(start.getDate() - 7);
            return [start, end];
        },
    },
    {
        text: "近一个月",
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 1)
            return [start, end];
        },
    },
    {
        text: "近三个月",
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 3)
            return [start, end];
        },
    },
];
</script>
<style lang="scss" scoped>
</style>