轉載：http://tuposky.iteye.com/blog/1300502 自己編寫的日期控件，可以對日期類型自己控制，功能強大。值得收藏一下。
/* 使用方法介紹： 在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;color:red;cursor:hand;">'+i+'</td>'; }else{ calendarDocument+='<td onClick="setInput('+i+')" align="center" style="border:1px solid blue;cursor:hand;">'+i+'</td>'; } }else{ //周末標紅 if(thisWeekDay(thisYear,thisMonth,i)==6 || thisWeekDay(thisYear,thisMonth,i)==0){ calendarDocument+='<td onClick="setInput('+i+')" align="center" style="color:red;cursor:hand;">'+i+'</td>'; }else{ calendarDocument+='<td onClick="setInput('+i+')" onmouSEOver="mouseOver(this);" onmouseout="mouseOut(this)"align="center" style="cursor:hand;">'+i+'</td>'; } } //星期六換行 if(thisWeekDay(thisYear,thisMonth,i)==6){ calendarDocument+="</tr>"; calendarDocument+="<tr>"; } } calendarDocument += '</tr>'; calendarDocument += '</table>'; //將構建好的控件字符串追加給div document.getElementById('div_calendar').innerHTML=calendarDocument; //默認選擇當前年 document.getElementById('sel_year').value=thisYear; //默認選擇當前月 document.getElementById('sel_month').value=thisMonth; } //全局變量——保存當前選擇的年月 var fullYear = year; var fullMonth = month; //上個月 function backMonthClick(){ if(fullMonth ==1){ fullYear=fullYear-1; fullMonth = 12; }else{ fullMonth=fullMonth-1; } cal(fullYear,fullMonth); } //下個月 function nextMonthClick(){ if(fullMonth ==12){ ++fullYear; fullMonth = 1; }else{ ++fullMonth; } cal(fullYear,fullMonth); } //年月下拉框 function changeYM(){ fullYear = document.getElementById('sel_year').value; fullMonth = document.getElementById('sel_month').value; cal(fullYear,fullMonth); } //當前日 function getThisDay(){ fullYear = year; fullMonth = month; cal(fullYear,fullMonth); } //顯示控件 function showCal(){ cal(year,month); //計算顯示控件位置 var x = document.getElementById('txt_calendar').offsetLeft; var y = document.getElementById('txt_calendar').offsetTop +22; document.getElementById('div_calendar').style.left=x+"px"; document.getElementById('div_calendar').style.top= y+"px"; document.getElementById('div_calendar').style.display = ""; } //隱藏控件 function hiddenCal(){ document.getElementById('div_calendar').style.display = "none"; } //選擇日期 function setInput(selDay){ document.getElementById('txt_calendar').value=fullYear+splitStr+fullMonth+splitStr+selDay; hiddenCal(); } //鼠標移進時 function mouseOver(obj){ obj.style.color="blue"; } //鼠標移出時 function mouseOut(obj){ obj.style.color=""; } //鍵盤響應 document.onkeydown=function(e) { //瀏覽器兼容 var thisEvent=e || window.event; var keyCode = thisEvent.keyCode || thisEvent.which; //如果控件是隱藏狀態 if(document.getElementById('div_calendar').style.display == "none"){ return false; } switch(keyCode){ case 32://空格 getThisDay();break; case 27://Esc hiddenCal();break; case 37://left backMonthClick();break; case 39://right nextMonthClick();break; } } /*模擬windows7日歷 鼠標滑輪滾動翻頁*/ var direct ; var scrollFunc=function(e){ //瀏覽器兼容 var thisEvent=e || window.event; //IE,Opera,Chrome,safari if(thisEvent.wheelDelta){ direct = thisEvent.wheelDelta; } else if(thisEvent.detail){//Firefox direct = thisEvent.detail; } /* Firefox 接收 +3 和 -3 其他瀏覽器接收 +120 和-120 +數表示鼠標向上滑動，-數表示向下滑動 */ //如果控件是隱藏狀態 if(document.getElementById('div_calendar').style.display == "none"){ return false; } //向上滑動，調用上一個月 if(direct=="120" || direct=="3"){ backMonthClick(); //向下滑動，調用下一個月 }else if(direct=="-120" || direct=="-3"){ nextMonthClick(); } } //注冊監聽事件 if(document.addEventListener){ //W3C document.addEventListener('DOMMouseScroll',scrollFunc,false); }else{ //IE,Opera,Chrome,safari document.onmousewheel = scrollFunc; }新聞熱點
疑難解答
