日期:2014-05-16  浏览次数:20383 次

自己写了个JS日历控件与大家分享

一时兴起用原生态JS写了个日历控件,不依赖js框架。
特地与大家分享下,供大家使用
与大家一起学习进步。


/* 
使用方法介绍:
在html里加上如下文本框则可
<input type="text" id="txt_calendar" onfocus="showCal()"/> 
 为了计算弹出来的位置这里文本框ID必须为txt_calendar
后续可以改成取其他属性的值或者写个 方法把id当参数传入
主要功能介绍:
鼠标滚轮上滚翻倒上一个月
鼠标滚轮下滚翻到下一个月
方向键的左右键分别控制上月和下月
空格键显示到当前月份
Esc键关闭控件
*/
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var day = d.getDate();
//年月日之间的分隔符
var splitStr="-";
//日期选择
var weekDays = new Array("日","一", "二", "三", "四", "五", "六"); 
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); 
var lastDay = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
//判断是否为闰年   
function isBissextile(year){   
 var isBis = false;   
 if (0==year%4&&((year%100!=0)||(year%400==0))) {   
  isBis = true;   
 }   
 return isBis;   
}   
//计算某月的总天数,闰年二月为29天   
function getMonthCount(year,month){   
 var Mcount = lastDay[month-1];   
 if((month==2)&&isBissextile(year)){
  Mcount++;
 } 
 return Mcount;   
}   
//计算某天是星期几
function thisWeekDay (year,month,date){
 var d = new Date(year,month-1,date);
 return d.getDay();
}
//先画一个div
document.write('<div style="display: none;position: absolute;z-index:10" id ="div_calendar"></div>');

//构建日历框
function cal(thisYear,thisMonth){
 var calendarDocument = '<table style="border:1px solid teal;" cellspacing="7" >';
  calendarDocument += '<tr><td colspan="6" style="cursor:hand;" align="center" onClick="getThisDay()">';
  calendarDocument += year+"年"+month+"月"+day+"日";
  calendarDocument += '</td>';
  calendarDocument +='<td style="cursor:hand;">';
  calendarDocument +='<span id="span_close" onClick="hiddenCal()"><font size="1">[关闭]</font></span>';
  calendarDocument +='</td></tr>';
  calendarDocument += '<tr><td>';
    calendarDocument += '<span id="backMonth" style="cursor:hand;" onClick="backMonthClick()">←<span>';
   calendarDocument += '</td>';
   calendarDocument += '<td colspan="5" align="center">';
    //构建年份下拉框[1900-2099]年
    calendarDocument +="<select id ='sel_year' onChange='changeYM()'>";
    for(var i = 1900;i<=2099;i++){
     calendarDocument +="<option value="+i+">"+i+"</option>";
    }
    calendarDocument +="</select>";
    calendarDocument += "年";
    //构建月份下拉框
    calendarDocument +="<select id ='sel_month' onChange='changeYM()'>";
    for(var i = 1;i<=12;i++){
     calendarDocument +="<option value="+i+">"+i+"</option>";
    }
    calendarDocument +="</select>";
    calendarDocument += "月";
   calendarDocument += '</td>';
   calendarDocument += '<td>';
    calendarDocument += '<span id="nextMonth" style="cursor:hand;" onClick="nextMonthClick()">→<span>';
   calendarDocument += '</td>';
  calendarDocument += '</tr>';
  calendarDocument += '<tr>';
   //输出星期
   for(var i = 0 ;i<weekDays.length;i++){
    //周末标红
    if(weekDays[i]=='日' || weekDays[i] == '六'){
     calendarDocument+='<td align="center" style="color:red">'+weekDays[i]+'</td>';
    }else{
     calendarDocument+='<td align="center">'+weekDays[i]+'</td>';
    }
   }
   calendarDocument+="</tr>";
   
   //输出天数
   calendarDocument+="<tr>";
   //算出当前年月1号是星期几
   var thisWeek = thisWeekDay(thisYear,thisMonth,1);
   if(thisWeek !=7){
    for (var sw = 0;sw<thisWeek;sw++){
     calendarDocument+='<td></td>';
    }
   }
   //开始循环输出当月天数
   for (var i = 1; i < getMonthCount(thisYear,thisMonth)+1; i++){
    //今天
    if(thisYear==year && thisMonth == month && i== day){
     //今天是周末
     if(thisWeekDay(thisYear,thisMonth,i)==6 || thisWeekDay(thisYear,thisMonth,i)==0){
      calendarDocument+='<td onClick="setInput('+i+')" align="center" style="border:1px solid blue;col