基础回顾
关于 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 位置。
第一、二步是很好处理的，主要是第三步，有些复杂。
我不想拼接 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
