日期计划

gifhome_906x648_8s.gif

• 计算年月日
  年月日的计算，有两种模式，一种是只计算当月日期，另一种则是将整年的日期都计算出来。在本篇文章里我想着重记录第一种写法。

  
  
  image.png

我们先来个看图说话，这个二月份有28天，1号是星期五。那是不是说，我们只要从周五开始，按顺序渲染出28个'main__block'就好了呢？其实就是这样，关键是怎么把我们的1号定位到周五，只要这个能够准确定位到，我们的日历自然就出来了。

// 定义每个月的天数，如果是闰年第二月改为29天
// year=2019;month=1(js--month=0~11)
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    daysInMonth[1] = 29;
}
// 获得指定年月的1号是星期几
let targetDay = new Date(year, month, 1).getDay();
// 将要在calendar__main中渲染的列表
let total_calendar_list = [];
let preNum = targetDay;
// 首先先说一下，我们的日期是(日--六)这个顺序也就是(0--6)
// 有了上述的前提我们可以认为targetDay为多少，我们就只需要在total_calendar_list的数组中push几个content为''的obj作为占位
if (targetDay > 0) {
    for (let i = 0; i < preNum; i++) {
        let obj = {
            type: "pre",
            content: ""
        };
        total_calendar_list.push(obj);
    }
}

这样一来，1号的位置自然而然就到了我们需要的星期五了，接下来就只需要按顺序渲染就ok啦。下面是剩下日期数组填充，填充完毕之后return出来供我们view层使用。
for (let i = 0; i < daysInMonth[month]; i++) {
let obj = {
type: "normal",
content: i + 1
};
total_calendar_list.push(obj);
}
nextNum = 6 - new Date(year, month+1, 0).getDay()
// 与上面的type=pre同理
for (let i = 0; i < nextNum; i++) {
let obj = {
type: "next",
content: ""
};
total_calendar_list.push(obj);
}
return total_calendar_list;

• 开发日历相关功能
  如何选择上一个月或下一个月？

data() {
    return {
        // ...
        selectedYear: new Date().getFullYear(),
        selectedMonth: new Date().getMonth(),
        selectedDate: new Date().getDate()
    };
}

handlePreMonth() {
    if (this.selectedMonth === 0) {
        this.selectedYear = this.selectedYear - 1
        this.selectedMonth = 11
        this.selectedDate = 1
    } else {
        this.selectedMonth = this.selectedMonth - 1
        this.selectedDate = 1
    }
}

handleNextMonth() {
    if (this.selectedMonth === 11) {
        this.selectedYear = this.selectedYear + 1
        this.selectedMonth = 0
        this.selectedDate = 1
    } else {
        this.selectedMonth = this.selectedMonth + 1
        this.selectedDate = 1
    }
}

就是这么简单，需要注意的点是跨年的时间转换，我们需要在变更月份的同时把年份也改变，这样才能渲染出正确的日期。
也许大家会有疑问，怎么变更了月份或年份之后不需要重新计算一次日期呢？其实是有计算的，不知大家是否还记得，vue可是数据驱动变更的，我们只需要关注数据的变更即可，其他东西vue都会帮我们解决。

• 如果选中某一天

handleDayClick(item) {
    if (item.type === 'normal') {
        // do anything...
        this.selectedDate = Number(item.content)
    }
}

在渲染列表的时候我就给每一个block绑定了click事件，这样做的好处就是调用十分方便，点击每一个block的时候，可以获取该block的内容然后do anything you like
当然我们也可以给外层的父级元素绑定事件监听，通过事件流来解决每个block的点击事件，这里看个人习惯~毕竟元素数量不是特别多
日历完成之后再进行相关的数据操作，以下是实现gif图的完整页面代码