简单的日历插件

PROMULGATOR

(′?｀)ノ?

湖南省长沙市

← 鼠标点击事件

→ jQuery获取当前行的行号

相关代码

简单的日历插件

简单的日历

最简单的js日历

简版js日历（原创）

Html

Css

Js

.schedule {
	width:320px;
	font-size:20px;
}
.schedule .dateChoose{
	font-size:20px;
	margin:200px 5px 0 0;
	padding:0;
	size:5;	
	outline:none;
	border:solid 1px #666;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.schedule .dateChoose option{
	font-size:20px;
}

function initYearOption() {
	var year_option = document.getElementById("year_option");
	var now = new Date();
	var startPoint = now.getFullYear();
	var endPoint = 1930;
	
	var temps = document.getElementsByClassName("inputs_userInfo");
	var tempsLength = temps.length
	
	var selectedYear;//获得出生年份
	for (var i = 0; i != tempsLength; ++i) {
		if (temps[i].getAttribue("rel") == "birthRel") {
			selectedYear = temps[i].innerText.substr(0,4);
		}
	}	
	//将用户原有的出生日期设置为selected
	if ((selectedYear != null) || (selectedYear != "")) {
		//要求，日期格式xxxx-xx-xx；
		var oldYear = selectedYear;
		var flag = false;
		for (var i = startPoint; i >= endPoint; --i) {
			var option_add = document.createElement('option');			
			option_add.innerText = i;
			if ((flag == false)&&(i == oldYear)) {
				option_add.setAttribute("selected",true);
				flag = true;
			}
			year_option.add(option_add);
		}
	}
	else {//将现有的年份设置为selected
		var option_s = document.createElement('option');
		option_s.innerText = startPoint;
		option_s.setAttribute("selected",true);
		for (var i = startPoint-1; i >= endPoint; --i) {
			var option_add = document.createElement('option');			
			option_add.innerText = i;
			year_option.add(option_add);
		}
	}
}

function initMonthOption() {	
	var month_option = document.getElementById("month_option");
	var startPoint = 1;
	var endPoint = 12;
	var now = new Date();
	var oldMonth = now.getMonth();
	
	var temps = document.getElementsByClassName("inputs_userInfo");
	var tempsLength = temps.length
	
	var selectedMonth;//获得出生年份
	for (var i = 0; i != tempsLength; ++i) {
		if (temps[i].getAttribue("rel") == "birthRel") {
			selectedMonth = temps[i].innerText.substr(0,4);
		}
	}	
	if ((selectedMonth != null) || (selectedMonth != "")) {//将用户原有的出生日期设置为selected
		//要求，日期格式xxxx-xx-xx；
		oldMonth = selectedMonth;		
	}
	var flag = false;
	for (var i = startPoint; i <= endPoint; ++i) {
		var option_add = document.createElement('option');			
		option_add.innerText = i;
		if ((flag == false)&&(i == oldMonth)) {
			option_add.setAttribute("selected",true);
			flag = true;
		}
		month_option.add(option_add);
	}
}

function initDayOption() {
	var month_options = document.getElementById("month_option");
	var month_taked = getSelectedValue(month_options);
	var day_option = document.getElementById("day_option");
	var startPoint = 1;
	var endPoint;	
	switch (Number(month_taked)) {//这里的年份和月份默认是字符串
		case 1: case 3: case 5: case 7: case 8: case 10: case 12:
			console.log("测试计划");
			endPoint = 31;
			break;
		case 4: case 6: case 9: case 11:
			endPoint = 30;
			break;
		case 2:
			var year_taked = document.getElementById("year_option").innerText;
			var isLeap = judgeLeapYear(Number(year_taked));
			if (isLeap == true){
				endPoint = 28;
			}
			else {
				endPoint = 29;
			}
			break;
		default:
			alert("error!");
			break;
	}
	for (var i = startPoint; i <= endPoint; ++i) {
		var option_add = document.createElement('option');
		option_add.innerText = i;
		day_option.add(option_add);
	}
	
}

function getSelectedValue(ele) {	
	var addOptions = ele.options;
	var index = ele.selectedIndex;
	var selectedText = addOptions[index].text;
	return selectedText;
}

function judgeLeapYear(year_taked) {
	if ((year_taked%4 != year_taked%100) || year_taked%400 == 0){
		return true;
	}
	else {
		return false;
	}
}
window.onload = function() {
	initYearOption();
	initMonthOption();
	initDayOption();
}

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

立即下载

简单的日历插件



代码描述：纯js实现一个简单的原生日历插件

一个简单的日历插件实现，仅作为学习交流

2

最新

发表评论全部评论

暂时没有评论！

让我感激你、曾予我欢颜0

2017/11/30 15:59:25

不止二月，其他也全是31天，嗯呢，还把月打成年，也是6了
回复

丨丶陌小沫灬0

2017/11/30 10:10:10

2月份出现了31天，你真的能上天
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单的日历插件-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号