Vue写一个日历

基础回顾

关于 Date API

getFulleYear(); // 年
getMonth(); // 月， 0-11
getDate();  // 日，也就是几号
getDay();   // 星期几，0-6
new Date(2019,2,10);  // 实际上就是 2019-03-10
new Date(2019,2,0);   // 其实是 2019-02-28, 也就是2月份的最后一天
new Date(2019,2,-1);  // 其实是 2019-02-27, 也就是2月份的倒数次日

var d = new Date();
d.setTime( new Date(2018,1,1).getTime() );   
d.getFullYear();   // 2018 , setTime 容许传入毫秒数来更改实例对象
复制代码

咱们须要注意一点，new Date 时，month 和 date 是能够传入负数的。

分析

作成啥样子呢，如图：

怎么作呢，一步步来分析：

①：计算出当前月份有多少天，遍历显示出来

②：点击上一月，下一月时，改变月份，并从新执行第一步

③：计算月初和月末分别对应星期几，并补全月初和月末的空位。如上图的 xx 位置。

第1、二步是很好处理的，主要是第三步，有些复杂。

我不想拼接 dom，因此就采用 vue来开发了，省时省力。

开始吧。

第一步和第二步

写好 html 和 css

<div id="app">
    <div class="calendar-wrapper">
        <div class="calendar-toolbar">
            <div class="prev" @click="prevMonth">上个月</div>
            <div class="current">{{ currentDateStr }}</div>
            <div class="next" @click="nextMonth">下个月</div>
        </div>
        <div class="calendar-inner">
            <div class="calendar-item" v-for="(item, index) of calendarList" :key="index">
                {{ item.date }}
            </div>
        </div>
    </div>
</div>
复制代码

css 我就略过了

编写 js 逻辑

感受前两步是比较简单的，我就直接贴js吧，加了部分注释，但愿不难读。

new Vue({
    el: '#app',
    data() {
        return {
            current: {},   // 当前时间
            calendarList: [],  // 用于遍历显示
            shareDate: new Date() // 享元模式，用来作优化的
        }
    },
    computed: {
        // 显示当前时间
        currentDateStr() {
            let { year, month } = this.current;
            return `${year}年${this.pad(month + 1)}月`;
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            // 初始化当前时间
            this.setCurrent();
            this.calendarCreator();
        },
        // 判断当前月有多少天
        getDaysByMonth(year, month) {
            return new Date(year, month + 1, 0).getDate();
        },
        // 对小于 10 的数字，前面补 0
        pad(str) {
            return str < 10 ? `0${str}` : str;
        },
        // 点击上一月
        prevMonth() {
            this.current.month--;
            // 由于 month的变化 会超出 0-11 的范围， 因此须要从新计算
            this.correctCurrent();
            // 生成新日期
            this.calendarCreator();
        },
        // 点击下一月
        nextMonth() {
            this.current.month++;
            // 由于 month的变化 会超出 0-11 的范围， 因此须要从新计算
            this.correctCurrent();
            // 生成新日期
            this.calendarCreator();
        },
        // 格式化时间，与主逻辑无关
        stringify(year, month, date) {
            let str = [year, this.pad(month + 1), this.pad(date)].join('-');
            return str;
        },
        // 设置或初始化 current
        setCurrent(d = new Date()) {
            let year = d.getFullYear();
            let month = d.getMonth();
            let date = d.getDate();
            this.current = {
                year,
                month,
                date
            }
        },
        // 修正 current
        correctCurrent() {
            let { year, month, date } = this.current;

            let maxDate = this.getDaysByMonth(year, month);
            // 预防其余月跳转到2月，2月最多只有29天，没有30-31
            date = Math.min(maxDate, date);

            let instance = new Date(year, month, date);
            this.setCurrent(instance);
        },
        // 生成日期
        calendarCreator() {
            // 一天有多少毫秒
            const oneDayMS = 24 * 60 * 60 * 1000;

            let list = [];
            let { year, month } = this.current;

            // 当前月，第一天和最后一天的毫秒数
            let begin = new Date(year, month, 1).getTime();
            let end = new Date(year, month + 1, 0).getTime();

            while (begin <= end) {
                // 享元模式，避免重复 new Date
                this.shareDate.setTime(begin);
                let year = this.shareDate.getFullYear();
                let curMonth = this.shareDate.getMonth();
                let date = this.shareDate.getDate();
                list.push({
                    year: year,
                    month: curMonth,
                    date: date,
                    value: this.stringify(year, curMonth, date)
                });
                begin += oneDayMS;
            }
                
            this.calendarList = list;
        }
    },
});
复制代码

第三步 - 显示星期，补全空位

这一步，咱们要作的有两点：

①：把星期列表显示出来，

②：调整 methods 中的 calendarCreator 函数，显示正确的星期顺序。

为了解决这个问题，咱们须要增长两个函数，判断当前月第一天是星期几，和最后一天是星期几。这样才能正确显示。

咱们注意一下 calendarCreator 函数，里面有个 begin 和 end 变量，分别表明当前月份第一天和最后一天的毫秒数。聪明的读者应该已经发现，若是须要补全的话，咱们能够在begin的基础上，再往前移动几天（减去这几天的毫秒数），在end的基础上，再日后移动几天（加上这几天的毫秒数），就能够实现这个效果了。具体移动多少，须要咱们经过计算获得。

咱们先完成 星期一至星期日的显示

<div class="calendar-week">
    <div class="week-item" v-for="item of weekList" :key="item">{{ item }}</div>
</div>
复制代码

data() {
    return {
        // 省略部分代码...
        weekList: ['一', '二', '三', '四', '五', '六', '日'],    // 新增
    }
},
复制代码

再往 methods 里增长两个函数：

// 当前月的第一天是星期几
getFirstDayByMonths(year, month) {
    return new Date(year, month, 1).getDay();
},
// 当前月的最后一天是星期几
getLastDayByMonth(year, month) {
    return new Date(year, month + 1, 0).getDay();
},
复制代码

调整 calendarCreator 函数，主要是调整 begin 和 end 的计算方式:

calendarCreator() {
    // 省略部分代码...
    
    // 当前月份第一天是星期几, 0-6
    let firstDay = this.getFirstDayByMonths(year, month);
    // 填充多少天，由于我将星期日放到最后了，因此须要另外调整下 
    let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
    // 向前移动以后的毫秒数
    let begin = new Date(year, month, 1).getTime() - (oneDayMS * prefixDaysLen);
    
    // 当前月份最后一天是星期几, 0-6
    let lastDay = this.getLastDayByMonth(year, month);
    // 填充多少天，由于我将星期日放到最后了，因此须要另外调整下 
    let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
    // 向后移动以后的毫秒数
    let end = new Date(year, month + 1, 0).getTime() + (oneDayMS * suffixDaysLen);
     
    // 省略部分代码...
}
复制代码

对于不属于当前月的日期，咱们须要将其置灰，因此须要调整下 calendarCreator 的 while 循环，

给 calendarList 数据加一个 disable 属性，而后在 html 那里记得加样式处理:

list.push({
    year: year,
    month: curMonth,
    date: date,
    disable: curMonth !== month,  // 新增 disable 属性
    value: this.stringify(year, curMonth, date)
});
复制代码

:class="[item.disable ? 'disabled' : '']"
复制代码

至此，一个简单的日历就开发完了。如图：

写在最后

css 我就不美化了，懒。。。

一些点击事件呀，hover效果呀，啥的，看官能够根据业务需求自行加上。

至于，改变年份，思想也是相似的。

但愿能给有须要的读者带来帮助。

源码在此 vue-calendar

参考

MDN