vue 周日历

需求：

1.类似于手机上的周日历，显示周天-周一的。

2.周日历能上翻下翻，并自动显示相应的年份和月份。

3.点击相应的月份，显示当月第一周的周日历。

4.选中某一固定日期，当前日期高亮。

最终效果图

项目结构如下

 

html代码

  
    
    
    
    
    
  
  
    

      

        

           <
          {{ year }} 年 
          >
        
        

          

            {{ item + 1 }}月
          
        
      
      

            <
            >
        

          

            {{ item.day }}
          
        
      
    
    
    
  

index.css代码

.main {
    width: 50%;
    min-width: 443px;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    }
    .year img {
    width: 20px;
    vertical-align:middle;
    }
    .year span {
    vertical-align: middle;
    }
    
    .pre {
        cursor: pointer;
        transform: rotate(180deg);
    }
    .pre-week{
        float: left;
        margin-top: 15px;
        cursor: pointer;
    }
    .next-week{
        float: right;
        margin-top: 15px;
        cursor: pointer;
    }
    .month{
    height:40px;
    }
    .month>div {
    float:left;
    width: 8.3%;
    line-height: 40px;
    border: 1px solid;
    box-sizing: border-box;
    cursor:pointer;
    }
    .month>div.active {
    border: 1px solid red;
    color: red;
    }
    .wrap {
    margin-left: 20px;
    margin-right: 20px;
    height: 50px;
    }
    .wrap>div{
    float:left;
    width: 14.28%;
    border: 1px solid #ece1e1;
    box-sizing: border-box;
    line-height: 50px;
    cursor:pointer;
    }
    .wrap>div.cur {
    border: 1px solid green;
    color: green;
    }
    .wrap>div.active {
    border: 1px solid red;
    color: red;
    }

index.js代码

var vm = new Vue({
    el: "#main",
    data: {
        today: "",
        activeDay: "",
        year: "",
        month: "",
        day: "",
        count: 0, //前一周后一周点击次数
        arr: [], //周日历,
        monthArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], //月份
        sureMonthFlag: false, //是否初始化月份
        sureYearFlag: false, //是否初始化年份
        selMonth: '',
        selYear: '',
    },
    created: function () {
        this.getData();
        this.getToday();
    },
    methods: {
        getToday: function () {
            var date = new Date();
            var year = date.getFullYear(); //年
            var month = date.getMonth(); //月 从0开始 0=》1月 1=》2月
            var day = date.getDate(); //日
            this.today = year + "," + month + "," + day;
        },
        getData: function (obj) {
            var date = new Date();
            if (this.sureMonthFlag) {
                date = new Date(this.selYear, this.selMonth, 1);
            }
            if (this.sureYearFlag) {
                date = new Date(this.selYear, this.selMonth, 1);
            }
            if (obj) {
                if (obj.value == '1') { //前一周
                    this.count--;
                } else if (obj.value == '2') { //后一周
                    this.count++;
                }
            }
            var year = date.getFullYear(); //年
            var month = date.getMonth(); //月 从0开始 0=》1月 1=》2月
            var day = date.getDate(); //日
            this.day = day;
            var weekDay = date.getDay(); //是本周的第几天
            this.getWeek(year, month, day, weekDay);
        },
        getWeek: function (year, month, day, weekDay) {
            this.arr = [];
            for (var i = 0; i < 7; i++) {
                var temDate = new Date(year, month, day - weekDay + i + this.count * 7);
                var temYear = temDate.getFullYear(); //年
                var temMonth = temDate.getMonth(); //月 从0开始 0=》1月 1=》2月
                var temDay = temDate.getDate(); //日
                var temDate = temYear + "," + temMonth + "," + temDay;
                var obj = {
                    "date": temDate,
                    "year": temYear,
                    "month": temMonth,
                    "day": temDay
                };
                this.arr.push(obj);
            }
            if (this.sureMonthFlag) {
                this.year = this.arr[6].year; //周日历数组的最后一个值的year为当前year
            } else {
                this.selYear = this.year = this.arr[6].year; //周日历数组的最后一个值的year为当前year
            }
            if (this.sureMonthFlag) {
                this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
            } else {
                this.selMonth = this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
            }
            this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
            this.day = this.arr[6].day; //周日历数组的最后一个值的day为当前day
        },
        //确定日期
        sureDay: function (value) {
            this.activeDay = value;//根据此值去发送请求即可
        },
        //确定月份
        sureMonth: function (item) {
            this.count = 0;
            this.selMonth = item;
            this.sureMonthFlag = true;
            this.sureYearFlag = false;
            this.selYear = this.year;
            this.getData();
        },
        //确定年份
        sureYear: function (value) {
            this.count = 0;
            this.sureYearFlag = true;
            this.sureMonthFlag = false;
            this.selMonth = this.month;
            if (value == 1) {
                this.year--;
            } else {
                this.year++;
            }
            this.selYear = this.year;
            this.getData();
        }
    }
})

难点:主要是交互时候的年月日，比如现在是2019，点击6月份，那么默认日期变为2019.6.1，点击count变为0。年份与月份类似。