vue怎么实现周日历切换效果

2023-06-30 04:06:53 125人浏览薄情痞子

摘要

本篇内容介绍了“Vue怎么实现周日历切换效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果如下：代码：<!DOCTYPE

本篇内容介绍了“Vue怎么实现周日历切换效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

效果如下：

vue怎么实现周日历切换效果

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta Http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>周日历</title>    <!-- 引入组件样式 -->    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.CSS" ></head><body>    <div id="app">        <!-- 上面的日历 -->        <div class="calendar">            <div class="arrow">                <i class="el-icon-arrow-left" @click="arrow('left')"></i>                <i class="el-icon-arrow-right" @click="arrow('right')"></i>            </div>            <el-calendar v-model="value" :range="dateRange"></el-calendar>        </div>        <!-- 下面的日历 -->        <div class="date">            <div class="arrow0">                <i class="el-icon-arrow-left" @click="weekPre"></i>                <i class="el-icon-arrow-right" @click="weekNext"></i>            </div>            <!-- 年份 月份 -->            <div class="month">                <p>{{ currentYear }}年{{ currentMonth }}月</p>            </div>            <!-- 星期 -->            <ul class="weekdays">                <li>一</li>                <li>二</li>                <li>三</li>                <li>四</li>                <li>五</li>                <li>六</li>                <li>日</li>            </ul>            <!-- 日期 -->            <ul class="days">                <li @click="pick(day)" v-for="(day, index) in days" :key="index">                    <!--本月-->                    <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>                    <span v-else>                    <!--今天-->                        <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>                        <span v-else>{{ day.getDate() }}</span>                    </span>                </li>            </ul>        </div>    </div></body><!-- 引入vue --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>    new Vue({    el: '#app',    data: function() {            return {                 // 上                value: "",                endDate: "",                dateRange: [],                dateNum: 0,                // 下                currentYear: "",   // 年份                currentMonth: "",  // 月份                currentDay: "",    // 日期                currentWeek: "",    // 星期                days: [],            }        },    mounted () {         },    created () {        // 上面的日历        this.dateList(this.dateNum);        console.log(this.dateRange);        // 下面的日历        this.initData();    },    methods: {        // 上面的日历         // 获取当前时间的周一        getMonday(date) {            var day = date.getDay();            var deltaDay;            if (day == 0) {                deltaDay = 6;            } else {                deltaDay = day - 1;            }            var monday = new Date(date.getTime() - deltaDay * 24 * 60 * 60 * 1000);            monday.setHours(0);            monday.setMinutes(0);            monday.setSeconds(0);            return monday; //返回选定时间的周一的0时0分0秒        },        getDateNew(time) {            console.log(time);            let times = new Date(time);            let year = times.getFullYear();            let month = times.getMonth() + 1 < 10 ? "0" + (times.getMonth() * 1 + 1) : times.getMonth() * 1 + 1;            let day = times.getDate() < 10 ? "0" + times.getDate() * 1 : times.getDate() * 1;            return year + "-" + month + "-" + day;        },        dateList(delta) {            //将时间对象转换为时间戳并加几天后转换为时间对象            var DateNews = this.getMonday(                new Date((new Date().getTime() / 1000 + 86400 * 7 * delta) * 1000)            );            let startDate = this.getDateNew(DateNews, delta);            this.endDate = this.getDateNew(                new Date((DateNews.getTime() / 1000 + 6 * 86400) * 1000)            );            this.dateRange = [startDate, this.endDate];        },        arrow(arrow) {            if (arrow == "left") {                this.dateNum--;                this.dateList(this.dateNum);            } else if (arrow == "right") {                this.dateNum++;                this.dateList(this.dateNum);            }        },         // 下面的日历         fORMatDate (year, month, day) {            const y = year            let m = month            if (m < 10) m = `0${m}`            let d = day            if (d < 10) d = `0${d}`            return `${y}-${m}-${d}`        },        initData (cur) {            let date = ''            if (cur) {                date = new Date(cur)            } else {                date = new Date()            }            this.currentDay = date.getDate()          // 今日日期 几号            this.currentYear = date.getFullYear()       // 当前年份            this.currentMonth = date.getMonth() + 1    // 当前月份            this.currentWeek = date.getDay() // 1...6,0   // 星期几            if (this.currentWeek === 0) {                this.currentWeek = 7            }            const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日            this.days.length = 0            // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek                        for (let i = this.currentWeek - 1; i >= 0; i -= 1) {                const d = new Date(str)                d.setDate(d.getDate() - i)                // console.log(y:" + d.getDate())                this.days.push(d)            }            for (let i = 1; i <= 7 - this.currentWeek; i += 1) {                const d = new Date(str)                d.setDate(d.getDate() + i)                this.days.push(d)            }        },        //  上个星期        weekPre () {            const d = this.days[0]    // 如果当期日期是7号或者小于7号            d.setDate(d.getDate() - 7)            this.initData(d)        },        //  下个星期        weekNext () {            const d = this.days[6]    // 如果当期日期是7号或者小于7号            d.setDate(d.getDate() + 7)            this.initData(d)        },        // 上一個月   传入当前年份和月份        pickPre (year, month) {            const d = new Date(this.formatDate(year, month, 1))            d.setDate(0)            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))        },        // 下一個月   传入当前年份和月份        pickNext (year, month) {            const d = new Date(this.formatDate(year, month, 1))            d.setDate(35)            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))        },        // 当前选择日期        pick (date) {            alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))        },    },})    </script><style lang="scss">    #app {        width: 40%;        margin: auto;    }    ul {        padding: 0;    }    li {        list-style-type: none;    }        .calendar {        position: relative;        width: 100%;        background: #fff;        margin-top: 20px;        margin-left: 20px;    }    .el-calendar__header {        display: block;    }    .el-calendar-table .el-calendar-day {        height: auto;        text-align: center;    }    .el-calendar-table td.is-selected {        background-color: #24b18d;        color: #fff;    }    .el-calendar-table .el-calendar-day:hover {        background-color: #24b18d;        color: #fff;    }    .el-calendar-table {        border-bottom: 1px solid #e4e4e4;        padding-bottom: 15px;    }    .el-calendar-table .next {        color: rgb(143, 143, 143);    }    .el-calendar__title,.el-calendar__button-group {        text-align: center;    }    .arrow {        width: 100%;        max-height: 46px;        position: absolute;        top: 15px;        text-align: center;    }    .arrow i {        font-size: 20px;        cursor: pointer;    }    .arrow i:nth-child(1) {        margin-right: 10%;        text-align: left;    }    .arrow i:nth-child(2) {        margin-left: 10%;        text-align: right;    }         .date {        position: relative;        margin-top: 20px;        padding: 10px 20px;        background-color: #D3D3D3;    }    .arrow0 {        width: 100%;        max-height: 46px;        position: absolute;        top: 27px;        left: 0px;        text-align: center;    }    .arrow0 i {        font-size: 20px;        cursor: pointer;    }    .arrow0 i:nth-child(1) {        margin-right: 10%;        text-align: left;    }    .arrow0 i:nth-child(2) {        margin-left: 10%;        text-align: right;    }    .month {        text-align: center;    }      .weekdays {        display: flex;    }     .weekdays li {        flex: 1;        text-align: center;    }     .days {        display: flex;    }     .days li {        flex: 1;        text-align: center;        cursor: pointer;    }     .days li span {        display: inline-block;        width: 22px;        height: 22px;    }    .days li span:hover {        color: #fff;        background-color: #409EFF;        border-radius: 50%;    }    .active {        display: inline-block;        color: #fff;        border-radius: 50%;        background-color: #fa6854!important;    }     .other-month {        color: #e4393c;    }   </style></html>