JS 日历

来源：互联网发布：凸优化应用讲义编辑：程序博客网时间：2024/05/14 18:12
达内的实习很痛苦。。。怎么还不给我们放暑假！！！
无聊啊无聊，Qt写飞秋，郁闷。。。。。。。。。。
无聊中写个JS 日历吧
注明转载连接：http://blog.csdn.net/ei__nino/article/details/9179011
实现功能：
1，年份按此年份前后各10年选区范围，同时提供自由选取
2，月份选取
3，日期的点击选取
4，FF浏览器支持不好！！
技术:HTML+CSS+Javascript
演示网站:www.einino.net
下面的代码没有将js分离，如果需要，直接分离就可以了
<!DOCTYPE html><head><meta charset='utf-8' /><script type='text/javascript' src='./nino_calendar.js' ></script></head><body><div id='calendar'></div></body><style type='text/css' >#calendar{ margin:20px auto; width:200px;}tr#nino_calendar_weekname,td.nino_calendar_tomonth,td.nino_calendar_nottomonth,td.nino_calendar_today{ font-family:"Arial","Microsoft Yahei"; text-align:center; padding:3px; cursor:crosshair;}tr#nino_calendar_weekname td {background:#EEE; color:#000; }tr#nino_calendar_weekname td:hover{background:#666; color:#FFF;}td.nino_calendar_tomonth{ background:#EEE; color:#000;}td.nino_calendar_tomonth:hover{background:#666; color:#FFF;}td.nino_calendar_nottomonth{ background:#EEE; color:#FFF;}td.nino_calendar_nottomonth:hover{background:#CCC; color:#666;}td.nino_calendar_today{ background:#999; color:#FFF;}td.nino_calendar_today:hover{background:#666; color:#FFF;}input#nino_calendar_year_i,input#nino_calendar_month_i,input#nino_calendar_day_i{ width:40px;}select#nino_calendar_year_select,select#nino_calendar_month_select{background:#444; color:#FFF;}input#nino_calendar_b{ width:100%;}</style><script type='text/javascript' >/*Calendaruse Nino_Calendar.setCalDays(2012,2,2)Copyright 2013,  EI NinoEmail: Jinyachen@gmail.com*/function stopBubble(){if (window.event) { event.cancelBubble=true; } else { event = arguments[0];event.stopPropagation(); }}var Nino_Calendar = {idName : "calendar",calId:"nino_calendar",monthDays : new Array(31,28,31,30,31,30,31,31,30,31,30,31),init: function(idName,calId){/*可选init，$1 为外部填充div的id,$2 为calendar的id和id前缀*/Nino_Calendar.idName = idName;Nino_Calendar.calId=calId;},getMonthsDays:function (year){/*获取月份的天数*/var date = new Date();if(arguments.length==0)var year=date.getFullYear();var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);if((year%4==0)&&(year%100!=0) || (year%400==0)){monthDays[1]=29;}Nino_Calendar.monthDays=monthDays;return monthDays;},getTotalDays :function (d,m){/*获取总天数*/if(arguments.length==0){var d = date.getDate();var m = date.getMonth();}var days =0;var i=0for(; i<m; i++){days += Nino_Calendar.monthDays[i];}return days+d;},setCalDays:function (year,month,day){/*设置日历*/var date = new Date();if(arguments.length==0)var year = date.getFullYear();if(arguments.length<=1)var month = date.getMonth()+1;if(arguments.length<=2)var day = date.getDate();if(arguments.length==3){date = new Date(year,month,day);}Nino_Calendar.getMonthsDays(year);var cal = document.getElementById(Nino_Calendar.idName);var calBody="<table id='"+Nino_Calendar.calId+"'>";calBody +="<tr id='"+Nino_Calendar.calId+"_weekname'><td colspan=4 id='"+Nino_Calendar.calId+"_year' >"+year+" 年</td><td colspan=3 id='"+Nino_Calendar.calId+"_month' name='"+day+"' >"+month+" 月</td></tr>";calBody +="<tr id='"+Nino_Calendar.calId+"_weekname'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";month = month-1;var preMonthDays = Nino_Calendar.monthDays[(month==0 ? 11 : month-1)];var tmp_date = new Date(year,month,1);preMonthDays=preMonthDays-tmp_date.getDay();var i=0;for(var ii=preMonthDays+1; i<tmp_date.getDay(); i++,ii++){if(i%7==0){calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";}calBody +="<td class='"+Nino_Calendar.calId+"_nottomonth' >"+ii+"</td>";if(i%7==6){calBody +="</tr>";}}for(var ii=1; ii<=Nino_Calendar.monthDays[month]; i++,ii++){if(i%7==0){calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";}if(ii==day){calBody +="<td class='"+Nino_Calendar.calId+"_today' >"+ii+"</td>";}else{calBody +="<td class='"+Nino_Calendar.calId+"_tomonth' >"+ii+"</td>";}if(i%7==6){calBody +="</tr>";}}for(var ii=1; i<42; i++,ii++){if(i%7==0){calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";}calBody +="<td class='"+Nino_Calendar.calId+"_nottomonth' >"+ii+"</td>";if(i%7==6){calBody +="</tr>";}}calBody +="<tr><td colspan=7><input id='"+Nino_Calendar.calId+"_year_i' type='text' />年<input id='"+Nino_Calendar.calId+"_month_i' type='text' />月<input id='"+Nino_Calendar.calId+"_day_i' type='text' />日</td></tr><tr><td  colspan=7><input id='"+Nino_Calendar.calId+"_b' type='button' value='set' /></td></tr></table>";cal.innerHTML=calBody;nino_calendar = document.getElementById(Nino_Calendar.calId);nino_calendar .addEventListener('click',Nino_Calendar.setHandle);nino_calendar_b = document.getElementById(Nino_Calendar.calId+"_b");nino_calendar_b.addEventListener('click',Nino_Calendar.setFromInput);document.getElementById(""+Nino_Calendar.calId+"_year_i").value=year;document.getElementById(""+Nino_Calendar.calId+"_month_i").value=month+1;document.getElementById(""+Nino_Calendar.calId+"_day_i").value=day;return calBody;},yearList:function(star,end){/*年份列表*/if( document.getElementById(""+Nino_Calendar.calId+"_month_select")){Nino_Calendar.setMonth();}var tmp_date = new Date();if(arguments.length==0){var start =tmp_date.getFullYear()-10;var end =tmp_date.getFullYear()+10;}else if(arguments.length==1){var end =start+10;}var Y = document.getElementById(""+Nino_Calendar.calId+"_year");var y= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));var list = "<select id=\""+Nino_Calendar.calId+"_year_select\">";for(var i=start; i<end; i++){if(i==y)list +="<option value='"+i+"'  selected=\"selected\" >"+i+"</option>";else list +="<option value='"+i+"' >"+i+"</option>";}list +="</select>";Y.innerHTML = list;var YS = document.getElementById(""+Nino_Calendar.calId+"_year_select");YS.addEventListener('change',Nino_Calendar.setYear);stopBubble();},setYear:function(){var Y = document.getElementById(""+Nino_Calendar.calId+"_year");var YS = document.getElementById(""+Nino_Calendar.calId+"_year_select");Y.innerHTML = YS.value+" 年";Nino_Calendar.setCal();},monthList:function(){if( document.getElementById(""+Nino_Calendar.calId+"_year_select")){Nino_Calendar.setYear();}var M = document.getElementById(""+Nino_Calendar.calId+"_month");var Y = document.getElementById(""+Nino_Calendar.calId+"_year");var y= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));var m= M.innerHTML.substring(0,M.innerHTML.indexOf(' '));Nino_Calendar.getMonthsDays(y);var list = "<select id=\""+Nino_Calendar.calId+"_month_select\">";for(var i=1; i<=12; i++){if(i==m){list +="<option value='"+i+"'  selected=\"selected\" >"+i+"</option>";}else{ list +="<option value='"+i+"' >"+i+"</option>";}}list +="</select>";M.innerHTML = list;var MS = document.getElementById(""+Nino_Calendar.calId+"_month_select");MS.addEventListener('change',Nino_Calendar.setMonth);},setMonth:function(){var M = document.getElementById(""+Nino_Calendar.calId+"_month");var MS = document.getElementById(""+Nino_Calendar.calId+"_month_select");M.innerHTML = parseInt(MS.value)+" 月";Nino_Calendar.setCal();},setDay:function(day){var M = document.getElementById(""+Nino_Calendar.calId+"_month");M.setAttribute('name',day);Nino_Calendar.setCal();},setHandle:function(){if((typeof event)=="undefined")event = arguments[0];var obj = event.srcElement ? event.srcElement:event.target;var obj_id = obj.getAttribute('id');switch(obj_id){case ""+Nino_Calendar.calId+"_year":{Nino_Calendar.yearList();break;}case ""+Nino_Calendar.calId+"_month":{Nino_Calendar.monthList();break;}default:{if(obj.className==""+Nino_Calendar.calId+"_nottomonth"){break;}day = obj.innerHTML;if(parseInt(day)>0&&parseInt(day)<=31)Nino_Calendar.setDay(day);break;}}stopBubble();},setCal:function(){var Y = document.getElementById(""+Nino_Calendar.calId+"_year");var M = document.getElementById(""+Nino_Calendar.calId+"_month");var yv= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));var mv= M.innerHTML.substring(0,M.innerHTML.indexOf(' '));var dv= M.getAttribute('name');Nino_Calendar.setCalDays(yv,mv,dv);},setFromInput:function(){var yv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_year_i").value);var mv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_month_i").value);var dv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_day_i").value);Nino_Calendar.setCalDays(yv,mv,dv);},}Nino_Calendar.init("calendar","nino_calendar");Nino_Calendar.setCalDays();</script></html>
效果: