jquery生成指定年月的日历

Html

Css

2017年09月

.cld_table table {
	table-layout:fixed;
	margin:0 auto;
	width:80%;
	max-width:644px;
}
.cld_table table td {
	position:relative;
	font-size:30px;
	color:#333;
	max-width:92px;
	max-height:92px;
	text-align:center;
	height:92px;
	cursor:pointer;
}
.riliText {
	text-align:center;
}

//控制td的宽高
function tdSizeWH() {
    var tdWidth = $('.cld_table tbody td').width();
    $('.cld_table tbody td').height(tdWidth);
    $(window).resize(function() {
        var tdWidth = $('.cld_table tbody td').width();
        $('.cld_table tbody td').height(tdWidth);
    });
}

var date = new Date();
//当前是哪一年
var year = date.getFullYear();
//当前是哪个月，注意这里的月是从0开始计数的
var month = date.getMonth(); //month+1几位当前月

//TODO 生成日历表填充到日历里
function riliTableHtml(year, month) {

$('.cld_year').html(year); //当前年
    $('.cld_month').html(month); //当前月

//当前月的第一天的日期
    var firstDay = new Date(year, (month - 1), 1);

//第一天是星期几
    var weekday = firstDay.getDay();

/**求当前月一共有多少天
     *new Date(year,month,0) ： month是当前月，day为0即我们所需的当前月的最后一天。
     *getDate（）则返回这个日期对象是一个月中的第几天，我们由最后一天得知这个月一共有多少天
     **/
    var days = new Date(year, month, 0).getDate();

var res = [];
    //输出第一天之前的空格
    for (var i = 0; i < weekday; i++) {
        res.push('');
    }

for (var j = 1; j <= days; j++) {
        res.push(j);
    }

var tabHtml = '';
    for (var i = 0; i < res.length; i++) {
        var td = '<td>' + res[i] + '</td>';

if (i % 7 == 0) {
            tabHtml += '<tr>' + td;
        } else if ((i + 1) % 7 == 0) {
            tabHtml += td + '</tr>';
        } else {
            tabHtml += td;
        }
    }
    $('.cld_table tbody').html(tabHtml); //填充到DOM里

tdSizeWH(); //控制td的宽高
}

riliTableHtml(year, month + 1); //生成当前年月的日历

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jquery生成指定年月的日历



代码描述：jquery生成指定年月的日历

要生成当前年月的日历：riliTableHtml(year,month+1);

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

lhy308720327

相关代码

2017年09月

jquery生成指定年月的日历

最新