纯JavaScript实现的日历控件

60 浏览量更新于2024-09-01 收藏 60KB PDF 举报

"纯javascript版日历控件的实现与解析" 在网页开发中，日历控件是一种常见的交互元素，常用于输入日期或者展示日期选择。本篇将详细介绍一个纯JavaScript实现的日历控件，无需依赖任何外部库，如jQuery等。开发者只需引用`calendar.js`文件，并将input元素的id设置为`calendar`，即可将文本框转化为一个功能完备的日历选择器。首先，我们需要在HTML中引入`calendar.js`。在`<head>`部分添加如下代码： ```html <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js" defer></script> </head> ``` 这里的`defer`属性确保`calendar.js`在页面加载完成后，但在`<body>`元素内的脚本执行之前被解析和执行。接下来，在`<body>`部分创建一个input元素，为其设置id为`calendar`，如下所示： ```html <body> <input id="calendar" type="text" /> </body> ``` `calendar.js`的核心代码如下： 1. 定义了一些必要的变量，如一周的天数（days）、当前日期（today）、大月和小月的数组（month_big和month_small），以及日期分隔符（separator）。 2. 获取与日历控件相关的DOM元素，包括日历控件本身（calendar）、其父元素（cal_parent），以及控件的宽度（cal_width）、高度（cal_height）、相对于父元素的左边距（cal_X）和上边距（cal_Y）。这些值用于创建日历显示的位置和大小。 3. 创建并显示日历面板的逻辑，这部分包括计算月份的天数、绘制日历表格、处理用户点击事件等。这部分代码没有在提供的片段中完整展示，但通常会包括以下步骤： - 计算当前月份的天数，根据大月和小月规则。 - 创建一个二维数组表示日历表格，每个单元格代表一天。 - 将日历表格插入到页面中，可能是一个`<table>`元素，每个单元格是`<td>`元素。 - 添加事件监听器，使用户能够通过点击日历上的日期来选择日期，并将选中的日期显示在input元素中。这个纯JavaScript日历控件的实现方式虽然简单，但可以作为一个基础模板，根据实际需求进行扩展，比如添加日期限制、多语言支持、自定义样式等功能。对于初学者来说，这是一个很好的学习JavaScript DOM操作、事件处理和日期处理的实践项目。对于有经验的开发者，它可以作为快速集成到现有项目中的轻量级解决方案。

纯纯javascript版日历控件版日历控件

主要介绍了纯javascript版日历控件，引用calendar.js文件，再把input的id设置成calendar,具有一定的参考价值，感兴趣的小伙

伴们可以参考一下

平时只有下班时间能code，闲来写了个纯javascript版。引用该calendar.js文件，然后给要设置成日历控件的input的id设置成calendar，该input

就会变成日历控件。

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

引用calendar.js时，一定要加defer属性。

calendar.js源码：

// JavaScript Document

var days = new Array("日","一","二","三","四","五","六");//星期

var today = new Date();//当天日期，备用

var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组

var month_small = new Array("4","6","9","11"); //包含所有小月的数组

var separator = "-";//间隔符

var calendar = document.getElementById("calendar");

var cal_parent = calendar.parentNode;//获取父元素

var cal_width = ((calendar.clientWidth<150) ? 150 : calendar.clientWidth);//获取input的宽度，如果input宽度小于150，调整为150，150为日历块最小宽度

var cal_height = calendar.clientHeight;//获取input的高度，整数

var cal_X = calendar.offsetLeft;//获取input左边距父元素的距离，整数

var cal_Y = calendar.offsetTop;//获取input顶部距父元素的距离，整数

calendar.style.cursor = "pointer";//将input的鼠标设置成小手

calendar.readOnly = "readOnly";//设置input为只读

calendar.onblur = hideCalendar; //当input失去焦点时，隐藏cal_body

calendar.onclick = showCalendar;//点击input时调用showCalendar函数

//取input宽度的七分之一再减一作为方格的边长

var pane_height = cal_width/7 - 1;

function hideCalendar(){

var cal_body = document.getElementById("cal_body");

if(cal_body != undefined){

cal_body.parentNode.removeChild(cal_body);

}

//显示日历主体

function showCalendar(){

var cal_body = document.getElementById("cal_body");

if(cal_body != undefined){

cal_body.parentNode.removeChild(cal_body);

}

else{

var cal_body = document.createElement("DIV");

cal_body.id = "cal_body";

cal_body.style.width = cal_width + "px";

cal_body.style.height = "auto";

cal_body.style.overflow = "hidden";

cal_body.style.position = "absolute";

cal_body.style.zIndex = "9";

cal_body.style.left = cal_X + "px";

cal_body.style.top = (cal_Y + cal_height + 5) + "px";

cal_body.style.border = "solid 1px #CCCCCC";

//鼠标移动到cal_body上时，禁用input的onblur事件，防止cal_body因input失去焦点而被隐藏

cal_body.onmouseover = function(){

calendar.onblur = undefined;

}

//鼠标从cal_body移除时，启用input的onblur事件，并且先让input获得焦点，否则当在cal_body上空白处点击后再移出在其他地方点击时，input因没有焦点而无法触发onblur事件

cal_body.onmouseout = function(){

calendar.focus();

calendar.onblur = hideCalendar;

}

cal_parent.appendChild(cal_body);

var line1 = document.createElement("DIV");

line1.style.width = cal_width + "px";

line1.style.height = pane_height + "px";

line1.style.backgroundColor = "#0FF";

var btn1 = document.createElement("DIV");

下载后可阅读完整内容，剩余4页未读，立即下载

用JavaScript制作的日历

2010-03-24 上传

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //创建一个数组,用于存放每个月的天数 function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) { this[0] = m0; this[1] = m1; this[2] = m2; this[3] = m3; this[4] = m4; this[5] = m5; this[6] = m6; this[7] = m7; this[8] = m8; this[9] = m9; this[10] = m10; this[11] = m11; } //实现月历 function calendar() { var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec"; var today = new Date(); var thisDay; var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); year = today.getYear() +1900; thisDay = today.getDate(); if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; nDays = monthDays[today.getMonth()]; firstDay = today; firstDay.setDate(1); testMe = firstDay.getDate(); if (testMe == 2) firstDay.setDate(0); startDay = firstDay.getDay(); document.write("

") document.write("") document.write("

"); document.write(""); document.writeln(""); document.writeln(""); document.writeln(""); document.writeln(""); document.writeln(""); document.writeln(""); document.writeln(""); column = 0; for (i=0; i<startDay; i++) { document.writeln("\n"); column++; } for (i=1; i<=nDays; i++) { if (i == thisDay) { document.writeln("") column++; if (column == 7) { document.writeln(""); column = 0; } } document.writeln("

"); var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); var now = new Date(); document.writeln("" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + ""); document.writeln("
日	一	二	三	四	五	六
	") } else { document.writeln("	"); } document.writeln(i); if (i == thisDay) document.writeln("
") document.writeln("<FORM NAME='clock' onSubmit='0'>") document.writeln(" 现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FORM>

") document.writeln("

"); } </SCRIPT>