日期自己创建

<template>
    <div class="fivepc tongyongpc">

        <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple riqichajian">

                    <div id="calendar">
                        <!-- 年份 月份 -->
                        <div class="month">
                            <ul>
                                <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
                                <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
                                <li class="year-month">
                                    <span class="choose-month">{{ currentYear }}年{{ currentMonth }}月</span>
                                </li>
                                <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
                            </ul>
                        </div>
                        <!-- 星期 -->
                        <ul class="weekdays">
                            <li>一</li>
                            <li>二</li>
                            <li>三</li>
                            <li>四</li>
                            <li>五</li>
                            <li>六</li>
                            <li>日</li>
                        </ul>
                        <!-- 日期 -->
                        <ul class="days">
                            <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
                            <li v-for="dayobject in days" @click="selectedDate(dayobject.day.getDate())">
                                <!--本月-->
                                <!--如果不是本月  改变类名加灰色-->
                                <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month"
                                    style="display: none;">
                                    {{ dayobject.day.getDate()}}
                                </span>
                                <!--如果是本月  还需要判断是不是这一天-->
                                <span v-else>
                                    <span
                                        v-if="dayobject.day.getFullYear() == xuanzhongyear && dayobject.day.getMonth() == xuanzhongmon && dayobject.day.getDate() == xuanzhongday"
                                        class="active">{{ dayobject.day.getDate() }}</span>
                                    <span v-else>{{ dayobject.day.getDate() }}</span>
                                </span>

                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    {{xuanzhongriqi}}
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    const debounce = (function () {
        let timer = 0;
        return function (callback, ms = 200) {  //设置默认200ms
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();
    export default {
        name: "fivepc",
        data() {
            return {
                currentDay: 1,
                currentMonth: 1,
                currentYear: 1970,
                currentWeek: 1,
                days: [],
                xuanzhongriqi: "",

                xuanzhongyear: 1,
                xuanzhongmon: 1,
                xuanzhongday: 1,
            };
        }, mounted() {
        },
        created() {
            this.initData(null);
            this.huoqudangtian()
        },
        methods: {
            huoqudangtian() {
                let now = new Date();
                this.xuanzhongyear = now.getFullYear(); // 2024  
                this.xuanzhongmon = now.getMonth(); // 月份是从0开始的，所以要加1  
                this.xuanzhongday = now.getDate(); // 10 
            },
            toDub(n) {
                //补0操作
                if (n < 10) {
                    return "0" + n;
                } else {
                    return "" + n;
                }
            },
            initData: function (cur) {
                var date;
                if (cur) {
                    date = new Date(cur);
                } else {
                    let now = new Date();
                    date = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
            
                }
                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;
                // }
                var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);

                this.days.length = 0;
                // 今天是周日，放在第一行第7个位置，前面6个
                //初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
                    dayobject.day = d;
                    this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                }
                //其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject = {};
                    dayobject.day = d;
                    this.days.push(dayobject);
                }
            },
            // 上一月
            pickPre: function (year, month) {
                console.log(year)
                console.log(month)
                let d = new Date(year, month - 1, 0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));

                console.log(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
            },
            // 下一月
            pickNext: function (year, month) {
                let d = new Date(year, month + 1, 0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            // 选中天数
            selectedDate: function (day) {
                this.xuanzhongyear = this.currentYear
                this.xuanzhongmon = this.currentMonth - 1
                this.xuanzhongday = day
                let dateStr = this.toDub(this.currentYear) + `-` + this.toDub(this.currentMonth) + `-` + this.toDub(day)
                console.log(dateStr)
                this.xuanzhongriqi = dateStr
            },
            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function (year, month, day) {
                let y = year;
                let m = month;
                let d = day;
                if (m < 10) m = "0" + m;
                if (d < 10) d = "0" + d;
                return `${y}-${m}-${d}`
            },
        },
    };
</script>
<!-- 2560*1600 -->
<!-- 1024 616 -->
<style lang="scss" scoped>
    .fivepc {

        width: 100%;
        height: 330px;
    }

    .riqichajian {
        ul {
            list-style-type: none;
        }

        #calendar {
            margin: 2px;
            width: 100%;
            /* margin: 0 auto; */
            border: 1px solid #ccc;
            border-radius: 0px;
            overflow: hidden;

            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        }

        .month {
            width: 100%;
        }

        .month ul {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        .year-month {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .choose-month {
            text-align: center;
            font-size: 1.5rem;
        }

        .arrow {
            padding: 20px;
        }

        .arrow:hover {
            background: rgb(242, 242, 242);
        }

        .month ul li {
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color: rgb(242, 242, 242);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .weekdays li {
            display: inline-block;
            width: 13.6%;
            text-align: center;
        }

        .days {
            padding: 0;
            background: #FFFFFF;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .days li {
            list-style-type: none;
            display: inline-block;
            width: 14.2%;
            text-align: center;
            padding: 12.7px 0;
            font-size: 1rem;
            color: #000;
            cursor: pointer
        }

        .days li .active {
            padding: 6px 10px;
            color: #00B8EC;
        }

        .days li .other-month {
            padding: 5px;
            color: gainsboro;
        }

        .days li span span:hover {
            padding: 6px 10px;
            border: 1px solid #00B8EC;
        }
    }
</style>