js日历demo

最近有个项目需要做一个日历,然后在网上没有找到合适的日历demo,索性自己写一个

这个是实现后的样子

demo支持上下月的切换,相关字段都有具体说明

如何判断当前月份1号是星期几

var myDate = new Date(checkedY,checkedM-1,'01');

var afterDay = myDate.getDay(); // 当前月份1号 星期几

checkedY  当前年份

checkedM  当前月份(月份是以0~11返回的所以需要-1);

获取到afterDay  之后需要先循环几个空的数组(如果不循环,每个月的1号都会是星期日或者星期一)


获取当前月份一共有多少天

var d = new Date(checkedY, checkedM, 0);

var remain = d.getDate();

获取到remain之后把当前月份循环并展示出来

如果设计稿中不需要展示前一个月及下一个月的日期那么就大功告成了  (*•̀ᴗ•́*)و ̑̑


如果需要展示那么在第①步获取到当前月份是星期几之后并计算上一个月一共有多少天

tips.在计算上一个月的天数之前需要判断上一个月到底是几月如果上一个月是12月计算之前需要把年份-1;然后把对应的日期塞到数组中;

计算完当前月份之后,需要对下一个月进行计算;先计算当前数组的长度。然后  /7  在parseInt();  获取到这个值之后  var MaxDay = (week+1)*7 -listArr.length;    得出下一个月在当前月份展示的数量,然后再进行循环就大功告成了  (*•̀ᴗ•́*)و ̑̑


代码:

···

日历demo

{{beforeM}}月

{{checkedY}}-{{checkedM}}

{{afterM}}月

{{item.day}}

:key="index" :class="{'showOther': item.isClick}">

今日

{{item.D_d}}

显示日历

···

你可能感兴趣的:(js日历demo)