日期:2014-05-16 浏览次数:20388 次
/* 使用方法介绍: 在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