JS 动态日历

最新推荐文章于 2020-08-16 20:57:56 发布

原创最新推荐文章于 2020-08-16 20:57:56 发布 · 281 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js生成动态日历 #js 动态日历 #js 实现动态日历

JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种利用HTML、CSS和JavaScript技术动态生成个性化月历的方法，包括选择年份和月份，以及展示相应的日历界面。通过前端交互，用户可以方便地查看不同年份和月份的日历，并在页面上直接进行日期的选择。

业务中有需要批量设置日期的需求，于是动态日历应运而生。。。。

看效果图：

看代码：

<html>
    <head>
    <title>动态日历</title>
	<style type="text/css">
		table{border:1px solid white;}
		thead tr{background-color:#dfe0e4;}
		thead tr td{text-align:center;}
		#calendar tr td{color: #000000;text-decoration: none;background-color:#EFEFEF;text-align:center;}
	</style>
	
    </head> 
    <body>
		年份：<select id="selYear" name="year" onchange="changeCalendar()"></select>
		月份：<select id="selMonth" name="month" onchange="changeCalendar()"></select>
		<table width="100%" border="1" cellspacing="0" cellpadding="1">
			<thead>
			<tr>
				<td>Sunday</td>                  
				<td>Monday</td>
				<td>Tuesday</td>
				<td>Wednesday</td>                  
				<td>Thursday</td>
				<td>Friday</td>
				<td>Saturday</td>
			</tr>
			</thead>
			<tbody id="calendar"></tbody>
		</table>
    </body>
	<script type="text/javascript">
		(function(){
			var selYear = document.getElementById("selYear");
			var selMonth = document.getElementById("selMonth");
		
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			//生成当前年往前推10往后推5的数据
			for(var i = year - 10,len = year + 5; i < len; i++){
				var opt = new Option(i + "年", i);
				if(i == year) opt.selected = true;
				selYear.options.add(opt);
			}
			//生成月份数据
			for(var j = 1; j <= 12; j++){
				var m = j < 10 ? "0" + j : j;
				var opt = new Option(m + "月", m);
				if(j == month) opt.selected = true;
				selMonth.options.add(opt);
			}
			//显示当前月日历
			showCalendar(year, month);
		})();
		
		//得到每月的天数
		function getDaysOfMonth(year, month){
			if(year && month){
				if(month == 2){
					//2月闰年判断
					if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){
						return 29;
					}
					return 28;
				}
				var bigMonth = [1,3,5,7,8,10,12];
				var littleMonth = [4,6,9,11];
				for(var m in bigMonth){
					if(bigMonth[m] == month)
						return 31;
				}
				for(var m in littleMonth) {
					if(littleMonth[m] == month)
						return 30;
				}
			}
		}
		
		//根据年月生成日历
		function showCalendar(year, month){
			if(year && month){
				var tbody = document.getElementById("calendar");
				//生成前删除之前的行
				for(var i = 0,len =tbody.rows.length;i< len;i++){
					tbody.deleteRow();
				}
				var date = new Date(year, month - 1, 1);//month月的第一天
				var day = date.getDay();//星期
				var days = getDaysOfMonth(year, month);//month月的总天数
				var temp = Math.floor((days + day) / 7);
				var rows = (days + day) % 7 == 0 ? temp : (temp + 1);//要循环的行数
				var d = 1;
				for(var i = 1; i <= rows; i++){//循环行
					var tr = document.createElement("tr");
					for(var j = 1; j <= 7; j++){//循环列
						var td = document.createElement("td");
						//超过最大天数赋空
						if(d > days){
							td.innerHTML = "";
							tr.appendChild(td);
							continue;
						}
						if(i == 1){
							//第一行判断month月第一天是星期几，例如星期二前面空两个周日、周一
							if(j >= day + 1){
								var html = "<input type='checkbox' name='chkDay'>";
								td.innerHTML = html + (d < 10 ? "0" + d : d);
								d++;
							}else{
								td.innerHTML = "";
							}
						} else {
							var html = "<input type='checkbox' name='chkDay'>";
							td.innerHTML = html + (d < 10 ? "0" + d : d);
							d++;
						}
						tr.appendChild(td);
					}
					tbody.appendChild(tr);
				}
			}
		}
		
		function changeCalendar(){
			var y = document.getElementById("selYear").value;
			var m = document.getElementById("selMonth").value;
			showCalendar(y, m);
		}
	</script>
</html>