js生成日历
使用JavaScript 生成日历
Date对象基础
// 获取当前的日期对象 getMonth()返回月份（0表示1月，11表示12月）
var v = new Date()
console.log("v",v);
console.log(v.getFullYear(),v.getMonth()+1,v.getDate())
// 获取一个指定的日期对象 2020 11 月 1日的日期对象 getMonth()返回月份（0表示1月，11表示12月）
var v2 = new Date(2020,11-1,1);
console.log("v2",v2);
console.log(v2.getFullYear(),v2.getMonth()+1,v2.getDate())
/*
年：使用四位数年份，比如2000。如果写成两位数或个位数，则加上1900，即10代表1910
如果是负数，表示公元前。
月：0表示一月，依次类推，11表示12月。
日：1到31。如果传入0表示 上个月的最后一个天
参数如果超出了正常范围，会被自动折算。
月和日使也可使用 负数，表示从基准日扣去相应的时间。
new Date(year,month-1,1) // 当前月的第一天
new Date(year,month,0) // 当前月的最后一天
*/
var v3 = new Date(2020,0,0) // 2019 12 月的最后一天
console.log("v3",v3)
// 如 传入12时表示 2021年的1月份,然而 后面日传入的是0,有表示上个月的最后一天，
// 所以是2020，12 的最后一天了
console.log(new Date(2020,12,0))
console.log(v3.getFullYear(),v3.getMonth()+1,v3.getDate())
分析
一个月最少28天 最多31天,小月28天，大月31天
如果小月的第一天刚好是周一 则刚好 4行显示完,
如果大月的第一天刚好是周日，则多出2行，也就是说,日历显示最多6行
整个日历列表显示为固定6行 那么现在只要是计算要显示上个月的几个日期
如(格式一)：这个月的第一天是 周3，则要显示上个月最后2天的日期
如(格式二)：这个月的第一天是 周3，则要显示上个月最后3天的日期
格式一(周一为起始)
| 周一 | 周二 | 周三 | 周四 | 周五 | 周六 | 周日 |
|---|---|---|---|---|---|---|
| A1 | A2 | A3 | A4 | A5 | A6 | A7 |
| B1 | B2 | B3 | B4 | B5 | B6 | B7 |
| C1 | C2 | C3 | C4 | C5 | C6 | C7 |
| D1 | D2 | D3 | D4 | D5 | D6 | D7 |
| E1 | E2 | E3 | E4 | E5 | E6 | E7 |
| F1 | F2 | F3 | F4 | F5 | F6 | F7 |
格式2(周日为起始)
| 周日 | 周一 | 周二 | 周三 | 周四 | 周五 | 周六 |
|---|---|---|---|---|---|---|
| A1 | A2 | A3 | A4 | A5 | A6 | A7 |
| B1 | B2 | B3 | B4 | B5 | B6 | B7 |
| C1 | C2 | C3 | C4 | C5 | C6 | C7 |
| D1 | D2 | D3 | D4 | D5 | D6 | D7 |
| E1 | E2 | E3 | E4 | E5 | E6 | E7 |
| F1 | F2 | F3 | F4 | F5 | F6 | F7 |
格式一(周一为起始)，代码
function dateList (year,month){
// ret保存生成好函数要返回的日期,
var ret = [];
// 如果没有传入 年月,自动获取当前的年月
if(!year||!month){
var today = new Date();
year = today.getFullYear();
month = today.getMonth() + 1;
}
var firstDay = new Date(year,month-1,1) // 获取当月的第一天;
var firstDayweekDay = firstDay.getDay(); // 当月的1号是星期几;(0到6之间)
// 0表示周日,则设置为7;
if(firstDayweekDay == 0){
firstDayweekDay = 7;
}
var lastDayOfLastMonth = new Date(year,month-1,0); // 上个月的最后一天;实例;
var lastDateOfLastMonth = lastDayOfLastMonth.getDate(); // 上个月最后一天 具体日期
var lastDay = new Date(year,month,0); // 当月的最后一天;
var lastDate = lastDay.getDate(); // 当月的最后一天是星期几
// 要显示几个上个月的日期;如值为7则表示要显示6个上个月的日期,此时当月1日为周日
var preMonthDayCount = firstDayweekDay -1; // 7-1
// 循环日历的42个格子
for (var i = 0; i < 7*6; i++){
// preMonthDayCount如果为6,则表示要显示上月个6天的数据,也就是说i等于6的时候才是当月的第一天(即date==1)
// preMonthDayCount如果为5,则表示要显示上月个5天的数据,也就是说i等于5的时候才是当月的第一天(即date==1)
// preMonthDayCount如果为1,则表示要显示上月个1天的数据,也就是说i等于1的时候才是当月的第一天(即date==1)
// 所以得出 date = i+1 - preMonthDayCount公式
var date = i+1 - preMonthDayCount;
var showDate = date;
var thisMonth = month;
// 计算 上个月的日期;
if(date <= 0){
thisMonth = month - 1; // 上个月的月份
showDate = lastDateOfLastMonth + date; // 上个月的真实日期
}else if(date > lastDate){
// 计算 下个月的日期;
thisMonth = month + 1;
showDate = showDate - lastDate;
}
if(thisMonth === 0) thisMonth = 12;
if(thisMonth === 13) thisMonth = 1;
ret.push({
month:thisMonth, // 月份
date:date, // 真实的日期;
showDate:showDate, // 显示的日期;
allDate: year+'-'+ (thisMonth<10?'0'+thisMonth:thisMonth) + '-'+ (showDate<10?'0'+showDate:showDate),
})
}
return ret;
}
格式2(周日为起始)，代码
function dateList (year,month){
// ret保存生成好函数要返回的日期,
var ret = [];
// 如果没有传入 年月,自动获取当前的年月
if(!year||!month){
var today = new Date();
year = today.getFullYear();
month = today.getMonth() + 1;
}
var firstDay = new Date(year,month-1,1) // 获取当月的第一天;
var firstDayweekDay = firstDay.getDay(); // 当月的1号是星期几;(0到6之间)
var lastDayOfLastMonth = new Date(year,month-1,0); // 上个月的最后一天;实例;
var lastDateOfLastMonth = lastDayOfLastMonth.getDate(); // 上个月最后一天 具体日期
var lastDay = new Date(year,month,0); // 当月的最后一天;
var lastDate = lastDay.getDate(); // 当月的最后一天是星期几
// 要显示几个上个月的日期;如值为0则表示要显示0个上个月的日期,此时当月1日为周日
var preMonthDayCount = firstDayweekDay; // 此处就不用减1;
// 循环日历的42个格子
for (var i = 0; i < 7*6; i++){
// preMonthDayCount如果为6,则表示要显示上月个6天的数据,也就是说i等于6的时候才是当月的第一天(即date==1)
// preMonthDayCount如果为5,则表示要显示上月个5天的数据,也就是说i等于5的时候才是当月的第一天(即date==1)
// preMonthDayCount如果为1,则表示要显示上月个1天的数据,也就是说i等于1的时候才是当月的第一天(即date==1)
// 所以得出 date = i+1 - preMonthDayCount公式
var date = i+1 - preMonthDayCount;
var showDate = date;
var thisMonth = month;
// 计算 上个月的日期;
if(date <= 0){
thisMonth = month - 1; // 上个月的月份
showDate = lastDateOfLastMonth + date; // 上个月的真实日期
}else if(date > lastDate){
// 计算 下个月的日期;
thisMonth = month + 1;
showDate = showDate - lastDate;
}
if(thisMonth === 0) thisMonth = 12;
if(thisMonth === 13) thisMonth = 1;
ret.push({
month:thisMonth, // 月份
date:date, // 真实的日期;
showDate:showDate, // 显示的日期;
allDate: year+'-'+ (thisMonth<10?'0'+thisMonth:thisMonth) + '-'+ (showDate<10?'0'+showDate:showDate),
})
}
return ret;
}
