一个点击日历框取得时间的例子

以前在网上找的一个例子，具体是出自哪里也忘了，反正觉得很方便，拿出来和大家一起分享。

来一个简单的界面图：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 日历面板 </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body {font-family:"宋体", sans-serif;font-size:12px;margin:0;
}
img {border:0px;
}/*统一设定ul ,li样式*/
ul , li {margin:0;padding:0;list-style:none;
}li {line-height:21px;
}/*单元格视图样式*/
#content {width:750px;margin:0 auto;border-left: 1px solid #CCDDEE;
}
#content .weekTitle {color:#53504D;background:#F1FFE3;height:20px;border-bottom: 1px solid #B8E78B;
}
#content .weekTitle td {text-align:center;
}
#content #render {color:#6A6A6B;
}
#content #render td {height:90px;vertical-align: top;border-right: 1px solid #CCDDEE;border-bottom: 1px solid #CCDDEE;
}
.dayStyle {color:#6A6A6B;padding-right:2px;padding-top:2px;height:15px;background:#E8EEF7;text-align:right;display:block;
}
.currDay {background:#FFFFCC;
}
.disableText {color:#BABDC4;
}
</style><script type="text/javascript">
//<![CDATA[/**************************************************
* * 根据class属性返回对象
* * 2008-6-22
* **************************************************
***************************************************/
var getElementsByClassName = function(className){var alls = document.getElementsByTagName("*");var rets = new Array();for (var i=0;i<alls.length ; i++){if (alls[i].className == className){rets.push(alls[i]);}}return rets;
};var Calendar = {model:function(){} ,controller:function(){} ,view:function(){}
};  //视图层
Calendar.view = function(){this.currDate = new Date();this.tds = null;this.days = null;this.backNode = null;this.disableDays = new Array();
};//根据年份返回每月天数
Calendar.view.getMonthDays = function(year){var feb = (year % 4 == 0)? 29:28; return new Array(31, feb , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
};//初始化
Calendar.view.prototype.init = function(){this.setCurrMonth(new Date().getFullYear() ,new Date().getMonth());this.addEventForTd();
};//为单元格注册事件
Calendar.view.prototype.addEventForTd = function(){for (var i=0;i<this.tds.length ;i++ ){this.tds[i].onclick = function(){var arr = this.getAttribute("dateValue").split("-");//alert(arr)alert(arr[0] +"-"+ (parseInt(arr[1])+1) +"-"+ arr[2]);};}
};//设定当前版面
Calendar.view.prototype.setCurrMonth = function(y ,m){this.currDate.setFullYear(y);this.currDate.setMonth(m);this.currDate.setDate(1);this.loadDaysByMonth(y ,m);
};//标示当前天
Calendar.view.prototype.markCurrDate = function(bDay ,eDay){var temp = new Date();if (this.currDate.getFullYear() == temp.getFullYear() && this.currDate.getMonth() == temp.getMonth()){for (var i=bDay;i<eDay ;i++ ){if (this.tds[i].getAttribute("dateValue").split("-")[2] == temp.getDate()){if (this.backNode){this.backNode.className = "";}this.tds[i].className = "currDay";this.backNode = this.tds[i];return false;}}}
};//复位版面状态
Calendar.view.prototype.reInState = function(){this.tds[35].parentNode.style.display = "none";if (this.backNode){this.backNode.className = "";}for (var i=0;i<this.disableDays.length ;i++ ){this.disableDays[i].className = "dayStyle";}this.disableDays.length = 0;
};//根据年月加载当前视图
Calendar.view.prototype.loadDaysByMonth = function(y ,m){y = parseInt(y) ,m = parseInt(m);this.reInState();  //复位版面状态//参数定位var beginDay = this.currDate.getDay();var _m = (m == 0)?11 : (m-1);var m_ = (m == 11)?0 : (m+1);var _y = (m == 0)?(y-1) : y;var y_ = (m == 11)?(y+1) : y;var prevMonthDays = Calendar.view.getMonthDays(_y)[_m];var currMonthDays = Calendar.view.getMonthDays(y)[m];var prevFlag = prevMonthDays - beginDay + 1 ,currFlag = 1 ,nextFlag = 1;//加载上月信息for (var i=0;i<beginDay ;i++ ){this.tds[i].setAttribute("dateValue" ,_y +"-"+ _m +"-"+ prevFlag);this.days[i].innerHTML = prevFlag;this.days[i].className = "dayStyle disableText";this.disableDays.push(this.days[i]);prevFlag++;}//加载当月信息for (var i=beginDay;i<currMonthDays+beginDay ;i++ ){this.tds[i].setAttribute("dateValue" ,y +"-"+ m +"-"+ currFlag);this.days[i].innerHTML = currFlag;currFlag++;}//加载下月信息for (var i=currMonthDays+beginDay;i<this.days.length ;i++ ){this.tds[i].setAttribute("dateValue" ,y_ +"-"+ m_ +"-"+ nextFlag);this.days[i].innerHTML = nextFlag;this.days[i].className = "dayStyle disableText";this.disableDays.push(this.days[i]);nextFlag++;}//若当月数据显示到第7行，那么显示它if (this.tds[35].getAttribute("dateValue")){if (this.tds[35].getAttribute("dateValue").split("-")[2] > 20){this.tds[35].parentNode.style.display = "";}}//标示当前天this.markCurrDate(beginDay ,currMonthDays+beginDay);
};window.onload = function(){view = new Calendar.view();view.tds = document.getElementById("render").getElementsByTagName("td");view.days = getElementsByClassName("dayStyle");view.init();document.getElementById("testButton").onclick = function(){view.setCurrMonth(document.getElementById("testYear").value,document.getElementById("testMonth").value);};
};//]]>
</script>
</head>
<body><div id="content"><select id="testYear"><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011" selected="selected">2011</option></select>年<select id="testMonth"><option value="0">1</option><option value="1">2</option><option value="2">3</option><option value="3">4</option><option value="4">5</option><option value="5">6</option><option value="6">7</option><option value="7">8</option><option value="8">9</option><option value="9" selected="selected">10</option><option value="10">11</option><option value="11">12</option></select>月<input type="button" value="设定日期" id="testButton" /><table width="100%" cellpadding="0" cellspacing="0" class="weekTitle"><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table><table width="100%" cellpadding="0" cellspacing="0" id="render"><tr><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td></tr><tr><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td></tr><tr><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td></tr><tr><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td></tr><tr><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td></tr><tr style="display:none;"><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td><td><span class="dayStyle"></span><div id="pros"></div></td></tr></table>
</div>
</body>
</html>

一个点击日历框取得时间的例子相关推荐

kde菜单图标显示不全_大小仅 1M！在电脑菜单栏上自定义日历，规划时间更方便...
之前我从 Windows 平台转到 Mac 平台的时候,有一点使用不习惯的就是日历部分. Windows 平台上,在右下角点击时间就会显示出当前月份的日历,还会有星期的显示,此时我就可以根据日历规划日 ...
手把手撸一个小而美的日历组件
手把手撸一个小而美的日历组件前言日历是前端开发中常见的业务组件之一,虽然现在有很多现成的日历组件,但是呢很多时候需要定制的时候就需要我们自己造一个,此时我们便需要了解日历的生成原理.其实也没有想象 ...
弘辽科技：如何制作一个高点击率主图，这些细节一定要记住
作为一个淘宝卖家,我们都知道,现在手机端流量是淘宝的主要流量,没有之一,甚至有的类目手机端流量能占到95%以上.在科技不断发展的今天,手机购物不再受时间和地点的限制,一部手机就可以让人们随时随地地买买 ...
Java Calendar 日历类的时间操作 Timestamp Date Calendar 相互转换
Java Calendar 日历类的时间操作,这也许是 Java 环境下创建和管理日历及操作时间最简单的一个方案了,示范代码也很简单. 演示了获取时间,日期时间的累加和累减,以及日期时间的比较. 原文 ...
一个vue的日历组件
说明: 1.基于element-ui开发的vue日历组件. 地址更新: 1.增加value-format指定返回值的格式 2.增加头部插槽自定义头部 <ele-calendar >< ...
Win10系统有时鼠标会无法点击但几秒时间不等会恢复正常
我的电脑是Win10系统,有时鼠标会无法点击但几秒时间不等会恢复正常,我一直很纳闷以前试了好几种方法,均没有解决最近又发现了一个好方法,没法复现测试,希望我后来不会再来删除它,感觉应该有用! 方法 ...
计算公元纪年法总天数及星期几(用自己的一个思路)查询日历保存到文本文件
计算任意指定公元日期总天数及星期几,查询输出日历到记事本的追加及覆盖.微软农历文档此 Windows 窗体应用程序演示如何将动画图像绘制到屏幕. VS组件管理器NuGet Package Manag ...
给一个表单提交绑定一个点击事件
如果给一个表单绑定一个点击事件会发生什么事情 <input type="submit" name="button" value="提交内容&qu ...
构造一个日期类java_Java8 新日期时间类（1）
Java.time 包的优势使用Java8,新的日期时间API引入覆盖旧的日期时间API的以下缺点. 非线程安全 - java.util.Date不是线程安全的,因此开发者必须在使用日期处理并发性问 ...

一个点击日历框取得时间的例子

一个点击日历框取得时间的例子相关推荐

最新文章

热门文章