利用html写一个日历,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 位置。

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

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

开始吧。

第一步和第二步

写好 html 和 css

上个月

{{ currentDateStr }}

下个月

{{ item.date }}

复制代码

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的基础上，再往后移动几天(加上这几天的毫秒数)，就可以实现这个效果了。具体移动多少，需要我们通过计算得到。

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

{{ item }}

复制代码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效果呀，啥的，看官可以根据业务需求自行加上。

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

希望能给有需要的读者带来帮助。

参考