基于vue的自定义日历组件

你的名字 2021-09-20 07:46 486阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Document</title>  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>  
    <style>  
     \* \{  
            box-sizing: border-box;  
        \}  
        ul \{  
            list-style-type: none;  
        \}  
        body \{  
            font-family: Verdana, sans-serif;  
            background: \#E8F0F3;  
        \}  
        \#calendar\{  
            width:80%;  
            margin: 0 auto;  
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);  
        \}  
        .month \{  
            width: 100%;  
            background: \#00B8EC;  
        \}  
        .month ul \{  
            margin: 0;  
            padding: 0;  
            display: flex;  
            justify-content: space-between;  
        \}  
        .year-month \{  
            display: flex;  
            align-items: center;  
            justify-content: space-around;  
        \}  
        .year-month:hover \{  
            background: rgba(150, 2, 12, 0.1);  
        \}  
        .choose-year \{  
            padding-left: 20px;  
            padding-right: 20px;  
        \}  
        .choose-month \{  
            text-align: center;  
            font-size: 12px;  
        \}  
        .arrow \{  
            padding: 30px;  
        \}  
        .arrow:hover \{  
            background: rgba(100, 2, 12, 0.1);  
        \}  
        .month ul li \{  
            color: white;  
            font-size: 12px;  
            text-transform: uppercase;  
            letter-spacing: 3px;  
        \}  
        .weekdays \{  
            margin: 0;  
            padding: 10px 0;  
            background-color: \#00B8EC;  
            display: flex;  
            flex-wrap: wrap;  
            color: \#FFFFFF;  
            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-bottom: 10px;  
            padding-top: 10px;  
            font-size: 1rem;  
            color: \#000;  
        \}  
        .days li .active \{  
            padding: 6px 10px;  
            border-radius: 50%;  
            background: \#00B8EC;  
            color: \#fff;  
        \}  
        .days li .other-month \{  
            padding: 5px;  
            color: gainsboro;  
        \}  
        .days li:hover \{  
            background: \#e1e1e1;  
        \}  
    </style>  
</head>  
<body>  
        <div id="calendar">  
                  
                <div class="month">  
                    <ul>  
                          
                        <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>  
                        <li class="year-month" @click="pickYear(currentYear,currentMonth)">  
                            <span class="choose-year">\{ \{ currentYear \}\}年</span>  
                            <span class="choose-month">\{ \{ 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 style="color:red">六</li>  
                    <li style="color:red">日</li>  
                </ul>  
                  
                <ul class="days">  
                      
                    <li  v-for="dayobject in days">  
                          
                          
              
                        <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">\{ \{ dayobject.day.getDate() \}\}</span>  
              
                          
                        <span v-else>  
                        
                            <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="active">\{ \{ dayobject.day.getDate() \}\}</span>  
                            <span v-else>\{ \{ dayobject.day.getDate() \}\}</span>  
                        </span>  
              
                    </li>  
                </ul>  
            </div>  
</body>  
<script>  
    var myVue=new Vue(\{  
        el: '\#calendar',  
        data: \{  
            currentDay: 1,  
            currentMonth: 1,  
            currentYear: 1970,  
            currentWeek: 1,  
            days: \[\],  
        \},  
        created: function() \{  //在vue初始化时调用  
            this.initData(null);  
        \},  
        methods: \{  
            initData: function(cur) \{  
                var leftcount=0; //存放剩余数量  
                var date;  
   
   
                if (cur) \{  
                    date = new Date(cur);  
                \} else \{  
                    var now=new Date();  
                    var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));  
                    d.setDate(35);  
                    date = new Date(this.formatDate(d.getFullYear(),d.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) \{  
   
                // setDate(0); 上月最后一天  
                // setDate(-1); 上月倒数第二天  
                // setDate(dx) 参数dx为 上月最后一天的前后dx天  
                var d = new Date(this.formatDate(year , month , 1));  
                d.setDate(0);  
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));  
            \},  
            pickNext: function(year, month) \{  
                var d = new Date(this.formatDate(year , month , 1));  
                d.setDate(35);  
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));  
            \},  
            pickYear: function(year, month) \{  
                alert(year + "," + month);  
            \},  
   
            // 返回 类似 2016-01-02 格式的字符串  
            formatDate: function(year,month,day)\{  
                var y = year;  
                var m = month;  
                if(m<10) m = "0" + m;  
                var d = day;  
                if(d<10) d = "0" + d;  
                return y+"-"+m+"-"+d  
            \},  
   
   
        \},  
    \});  
   
</script>  
</html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbWVjaGVuZmw_size_16_color_FFFFFF_t_70][]  
作者：疯三年   
来源：CSDN   
原文：https://blog.csdn.net/namechenfl/article/details/88193791   
版权声明：本文为博主原创文章，转载请附上博文链接！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbWVjaGVuZmw_size_16_color_FFFFFF_t_70]: /images/20210725/7def3f6cb67c46048914e8a78d996567.png