周时间选择器,上周下周

<template>
    <div class="content">
        <div class="main">
            <div class="box">
                <div style="width: 100%;height: 50px;">
                    <el-button class="el-icon-caret-left btn" type="primary" @click="handleLast">上一周</el-button>
                    <el-date-picker :format="startDate + ' 至 ' + endDate" v-model="weeklyDate" type="week"
                        :picker-options="{ 'firstDayOfWeek': 1 }" @change="newDateWeekHandle" placeholder="选择周" readonly
                        style="width: 230px;background-color: #f8f8f8;">
                    </el-date-picker>
                    <el-button type="primary" @click="handleNext" class="btn">下一周<i
                            class="el-icon-caret-right"></i></el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            weeklyDate: null,
            startDate: "",
            endDate: ""
        };
    },
    created() { },

    methods: {
        newDateWeekHandle() {
            const start = new Date(this.weeklyDate);
            const end = new Date(start.getTime() + 6 * 24 * 60 * 60 * 1000);
            this.startDate = this.formatDate(start);
            this.endDate = this.formatDate(end);
            console.log(this.startDate, this.endDate);
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");
            return `${year}-${month}-${day}`;
        },
        getDateWeek() {
            const now = new Date();
            const day = now.getDay();
            const monday = new Date(now.getTime() - (day - 1) * 24 * 60 * 60 * 1000);
            this.weeklyDate = monday;
            this.newDateWeekHandle();
        },
        handleLast() {
            const last = new Date(this.weeklyDate.getTime() - 7 * 24 * 60 * 60 * 1000);
            this.weeklyDate = last;
            this.newDateWeekHandle();
        },
        handleNext() {
            const next = new Date(this.weeklyDate.getTime() + 7 * 24 * 60 * 60 * 1000);
            this.weeklyDate = next;
            this.newDateWeekHandle();
        }
    },
    mounted() {
        this.getDateWeek();
    }
};
</script>

<style lang="scss">
.content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;

    .main {
        width: 1200px;
        height: 100%;
        // background-color: aqua;
        background-color: #fff;

        .btn {
            border: none;
            background-color: #fff;
            color: #383838;
        }
    }
}
</style>