JS 日历
达内的实习很痛苦。。。怎么还不给我们放暑假！！！
无聊啊无聊，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' >
/*
Calendar
use Nino_Calendar.setCalDays(2012,2,2)
Copyright 2013, EI Nino
Email: [email protected]
*/
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=0
for(; 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>