js-日历_calendarcomponent.js-CSDN博客

本文链接：https://blog.csdn.net/SURLIYA/article/details/79977299
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>日历</title>
	</head>
	<body>
		<div id="selectDate">
			<select id = "year" οnchange="changeTitle();setCalendar();checkDay();"></select>年
			<select id = "month" οnchange="changeTitle();setCalendar();checkDay();selectDay();"></select>月
			<select id = "day" οnchange="checkDay();"></select>日
		</div>
		<div id = "">
			<table border="1" id = "">
				<caption id="title">2010年1月</caption>
				<tr>
					<th>日</th>
					<th>一</th>
					<th>二</th>
					<th>三</th>
					<th>四</th>
					<th>五</th>
					<th>六</th>
					</tr>
				<tbody id = "calTbody"></tbody>
			</table>
		</div>
	</body>
	<script type="text/javascript">
			/* 年份 */
			function selectYear() {
				// 获取父节点
				var select = document.getElementById("year");
				
				for (var year = 2010; year <= 2050; year++) {
					// 创建选项Option对象
					 var option = new Option(year);
					 // 设置文本内容
					 option.text = year;
					 // 设置选项值
					 option.value = year;
					 // 将选项添加的到select中
					 select.add(option);

					 // 默认选中本年
					 if (option.value == (new Date()).getFullYear()) {
					 	option.selected = true;
					 }
				}
			}

			/* 月份 */
			function selectMonth() {
				// 获取父节点
				var select = document.getElementById("month");
				for (var month = 1; month <= 12; month++) {
					// 创建选项Option对象
					 var option = new Option(month);
					 // 设置文本内容
					 option.text = month;
					 // 设置选项值
					 option.value = month;
					 // 将选项添加的到select中
					 select.add(option);	

					 // 默认选中本月
					 if (option.value == (new Date()).getMonth() + 1) {
					 	option.selected = true;
					 }			
				}
			}
			
			/* 本月的天数 */
			function selectDay() {
				// 获取父节点
				var select = document.getElementById("day");
				// 清空上次点击加载的内容
				select.innerHTML = '';
				
				// 选中的年
				var year = document.getElementById("year").value;
				// 选中的月
				var month = document.getElementById("month").value;
				// 本月(month-1)的最后一天
				var lastDay =getDays(year, month);
				
				for (var day = 1; day <= lastDay; day++) {
					// 创建选项Option对象
					 var option = new Option(day);
					 // 设置文本内容
					 option.text = day;
					 // 设置选项值
					 option.value = day;
					 // 将选项添加的到select中
					 select.add(option);	
					 
					 // 默认选中今天
					 if (option.value == (new Date()).getDate()) {
					 	option.selected = true;
					 }
				}
			}
			 
			 // 改变表格标题
			 function changeTitle() {
			 	// 选中的年
				var year = document.getElementById("year").value;
				// 选中的月
				var month = document.getElementById("month").value;
				// 改变表格名称
				var title = document.getElementById("title");
				title.innerHTML = year + "年" + month + "月";
			 }
			 
			 // 根据年和月设置天
			 function setCalendar() {
			 	// 获取table节点
			 	var cal = document.getElementById("calTbody");
			 	// 清除上次点击时加载的内容
			 	cal.innerHTML = '';
			 	// 选中的年
				var year = document.getElementById("year").value;
				// 选中的月
				var month = document.getElementById("month").value;
			 	// 天数
				var lastDay = getDays(year, month);
				// 1号的星期数
				var firstDay = getFirstWeek(year, month);
				// 天
				var day = 1;
				// 加载日历
				for (var i = 1; i <= 6; i++) {
					// 创建tr标签
					var tr = document.createElement("tr");

					for (var j = 1; j <= 7; j++) {
						// 创建td标签
						var td = document.createElement("td");
						// 最后一天结束
						if (day > lastDay) {
							break;
						}
						// 第一天之前的星期写x
						if (i == 1 && (j < firstDay)) {
							// 创建td标签的内容
							var fd = document.createTextNode('');
						} else {
							// 创建td标签的内容
							var fd = document.createTextNode(day);
							// 给td设置name属性值
							td.setAttribute("id", "day" + day);
							// 加1天
							day += 1;
						}
						// 将内容添加到td标签中
						td.appendChild(fd);
						// 将td标签添加到tr中
						tr.appendChild(td);
					}
					// 将tr添加到tbody中
					calTbody.appendChild(tr);
				}
			 }
			 
			 /**
			  * 根据年和月获取当月的天数
			  * 
			  * @param {Object} year 年
			  * @param {Object} month 月
			  */
			 function getDays(year, month) {
			 	// 本月(month-1)的最后一天
			 	var date = new Date(year, month, 0);
			 	return date.getDate();
			 }
			 
			 /**
			  * 根据年和月获取当月1号的星期数
			  * 
			  * @param {Object} year 年
			  * @param {Object} month 月
			  */
			 function getFirstWeek(year, month) {
			 	var date = new Date(year, month - 1, 1);
			 	return date.getDay() + 1;
			 }
			 
			 // 选中天
			 function checkDay() {
			 	// 重新加载日历(清除之前选中的样式)
			 	setCalendar();
			 	// 获取选中的天
			 	var day = document.getElementById("day").value;
			 	// 获取选中天的td标签
			 	var tableDay = document.getElementById("day" + day);
			 	// 改变背景色
			 	tableDay.style.backgroundColor = "cadetblue";
			 }
			 
			 // 加载年
			 window.onload = selectYear();
			 // 加载月
			 window.onload = selectMonth();
			 // 加载当月的天
			 window.onload = selectDay();
			 // 加载当月的日历
			 window.onload = setCalendar();
			 // 加载选中的天
			 window.onload = checkDay();
		</script>
</html>