JS之日历实践附实现代码

更新时间：2009年02月01日 22:07:59 作者：

在很多采集信息的过程中，日期的准确输入是一个重要的问题，因为日期在不同的地方以不同的格式表达。本例旨在应用于网页中，用户可通过鼠标点击向程序输入日期数据。

程序是这个样子的：首先采集用户输入的年份和月份，经过计算获取该月份的最大天数，并获取月份第一天是星期几。然后在表格中填充该月份的具体信息。

<html> <head> <title>日历测试</title> <script> function getMonthJuZhen(date){ if(arguments.length == 0){ throw new Error("need a date"); } if(arguments[0] == null){ throw new Error("date is null or undefined"); } if(arguments[0] instanceof Date){ var monthjuzhen = new Array(5); for(var r = 0 ; r < 5 ; r++){ monthjuzhen[r] = [0,0,0,0,0,0,0]; } var maxDay = getMaxDay(arguments[0]); arguments[0].setDate(1); var r = 0; var c = arguments[0].getDay(); for(var d = 1 ; d <= maxDay ; d++){ monthjuzhen[r][c] = d; if(c == 6){ if(r == 4){ r = 0; } else{ r++; } c = 0; } else{ c++; } } return monthjuzhen; } else{ throw new Error("need a date"); } } function getMaxDay(date){ if(arguments.length == 0){ throw new Error("need a date"); } if(arguments[0] == null){ throw new Error("date is null or undefined"); } if(arguments[0] instanceof Date){ var tempDate = new Date(arguments[0].toString()); if(arguments[0].getMonth() == 11){ tempDate.setFullYear((tempDate.getFullYear()+1)); tempDate.setMonth(0); } else{ tempDate.setMonth((tempDate.getMonth()+1)); } return Math.floor((tempDate.getTime()-arguments[0].getTime())/(1000*60*60*24)); } else{ throw new Error("need a date"); } } function updateDate(){ var yearInput = document.getElementById("yearinput"); var monthInput = document.getElementById("monthinput"); try{ var year = parseInt(yearInput.value); var month = parseInt(monthInput.value); if(isNaN(year)){ if(isNaN(month)){ monthInput.value = ""; } yearInput.value = ""; return; } if(isNaN(month)){ monthInput.value = ""; return; } if(month > 12 || month < 1){ monthInput.value = ""; return; } month--; var date = new Date(year,month); var monthjuzhen = getMonthJuZhen(date); var day; var dayvalue; for(var r in monthjuzhen){ for(var c in monthjuzhen[parseInt(r)]){ day = document.getElementById(r+"-"+c); dayvalue = monthjuzhen[parseInt(r)][parseInt(c)]; if(dayvalue == 0){ if(day.hasChildNodes()){ day.removeChild(day.firstChild); } day.onmouseover = null; day.onmouseout = null; day.onclick = null; continue; } if(day.hasChildNodes()){ day.firstChild.nodeValue = dayvalue; } else{ day.appendChild(document.createTextNode(dayvalue)); } day.setAttribute("date",year+"-"+month+"-"+dayvalue); day.onmouseover = function(){this.style.backgroundColor = "black";this.style.color = "white";}; day.onmouseout = function(){this.style.backgroundColor = "white";this.style.color = "black"}; day.onclick = subDate; } } } catch(e){ alert(e); } } function subDate(){ var date = this.getAttribute("date").match(/(\d+)-(\d+)-(\d+)/); alert(new Date(date[1],date[2],date[3])); } </script> </head> <body> <div><table style="background-color:white;"> <tr> <td colspan="7"> <input id="yearinput" type="text" size="4" MAXLENGTH="4" onchange="updateDate()"/>年 <input id="monthinput" type="text" size="2" MAXLENGTH="2" onchange="updateDate()"/>月&nbsp;&nbsp;<span onclick="updateDate()">更新</span></td> </tr> <tr> <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td> </tr> <tr> <td id="0-0"></td><td id="0-1"></td><td id="0-2"></td><td id="0-3"></td><td id="0-4"></td><td id="0-5"></td><td id="0-6"></td> </tr> <tr> <td id="1-0"></td><td id="1-1"></td><td id="1-2"></td><td id="1-3"></td><td id="1-4"></td><td id="1-5"></td><td id="1-6"></td> </tr> <tr> <td id="2-0"></td><td id="2-1"></td><td id="2-2"></td><td id="2-3"></td><td id="2-4"></td><td id="2-5"></td><td id="2-6"></td> </tr> <tr> <td id="3-0"></td><td id="3-1"></td><td id="3-2"></td><td id="3-3"></td><td id="3-4"></td><td id="3-5"></td><td id="3-6"></td> </tr> <tr> <td id="4-0"></td><td id="4-1"></td><td id="4-2"></td><td id="4-3"></td><td id="4-4"></td><td id="4-5"></td><td id="4-6"></td> </tr> </table> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

无聊，写了个日历程序，欢迎拍砖
无聊，写了个日历程序，欢迎拍砖...
2007-02-02
兼容IE、firefox以及chrome的js获取时间(getFullYear)
今天在写一个js获取年份的时候发现在firefox以及chrome浏览器下有问题，原来不兼容getYear不过可以通过getFullYear来解决，这里特分享下方便需要的朋友
2014-07-07
JS 显示当前日期与时间的代码
用js实现的日期与时间的代码，但代码较多，喜欢的朋友可以研究下，正规的使用建议用脚本之家之前发布的内容。
2010-03-03
JS 日历控件(蓝色)
超漂亮的JS日历控件，代码有些复杂。
2010-03-03
javascript 当前日期加(天、周、月、年)
javascript当前日期加(天、周、月、年) ，有需要操作日期的朋友，可以参考下。
2009-08-08
日期处理的js库（迷你版）--自建js库总结
先推荐网上不错的日期js库：http://momentjs.com/ 其实这类资源网络上一抓一把，但是想要针对项目实用的还是不多，因为我接触的那类都经常在日期而非深入到hour、minute、second！所以想干脆自己编个小库吧，这样以后写代买将省力很多，在这里分享下，希望对大家有用
2011-11-11
javascript倒计时功能实现代码
javascript倒计时功能实现代码，需要的朋友可以参考下
2012-06-06
兼容FireFox 的 js 日历支持时间的获取
应网友要求，花了五六个小时，为我经常用的 js 日历添加时间的获取。
2009-03-03
js日历控件（可精确到分钟）
非常不错的可以精确到分钟的日历选择控件，方便我们选择文章的修改日期等
2008-09-09
仅2行代码的javascript按指定格式显示日期时间效果
我曾为解决该问题花了不少时间，主要是网络上找到的代码要么非常烦琐，要么不能通用或格式只能固定几个，所以我专门对这个问题进行了研究，最终优化到只有2行代码，非常精简。
2011-09-09