js实现日期控件

来源：互联网发布：淘宝电子产品拆封退货编辑：程序博客网时间：2024/05/16 22:45
转载：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;      }
0 0