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;
    }