起因
最近项目上要实现一个需求,如下:
右上角下拉按钮选择年月,下方对应出来当月的天数并且附上星期几,当天以前天数不能选,根据条件可单选可双选。在封装此组件时,用到了很多new Date()知识点,今天就来总结一下。
常用API
1. getFullYear() 获取年份
2. getMonth() 获取月份,需要注意的是获取的月份为实际月份-1的结果,要获取实际月份需要 getMonth()+1
3. getDate() 获取当前天数
此需求需要在左上角显示年月,一开始用户没有选择的时候应该自行判断当前年月,就需要用到以上API
4. getHours() 获取当前小时
5. getMinutes() 获取当前分钟
6. getSeconds() 获取当前秒钟
new Date()的妙用
获取当前月份天数
要获取当前月份的天数(比如:现在是9月,那么当前月份总共有30天)需要知道一个知识点:当new Date()中day传0时,获取的是上一个月的最后一天。
因为month比实际传入的要大一个月即:当传入是9,实际会获取10月前一个月的最后一天,也就是9月。获取到了上月最后一天再用getDate()获取到天数。简单两行代码就完成了,比之前要判断是不是闰年和当下几月是不是要巧妙的多?
时间差
获取两个时间的时间差:
但是有个有趣的现象:
当传入的不是字符串的时候,且年月相同,可以获取两个时间相差的天数。这个还有待分析。
总结
Date()对象还有很多方法可以使用,可以去MDN查看:MDN Date解析。当然,随着前端的发展出现了不少好用类库,其中处理日期时间的就有一个moment.js,轻量级的javascript日期处理类库。