vue实现周日历切换（两种方式）

最新推荐文章于 2024-08-19 10:29:16 发布
weixin_44353999
最新推荐文章于 2024-08-19 10:29:16 发布
阅读量5k
点赞数 2
分类专栏：前端
本文链接：https://blog.csdn.net/weixin_44353999/article/details/121555271
版权
Vue.js Element UI 日历组件日期选择 CSS样式
关键词由CSDN通过智能技术生成
前端专栏收录该内容
6 篇文章 2 订阅
订阅专栏
废话不多说，直接上干货，需要的朋友自取
<!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
            /* eslint-disabled */
            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>
第二种日历的实现方式参考http://www.cnblogs.com/zhengweijie/p/7289764.html