JAVASCRIPT中时间控件的实现

项目说明 在WEB项目开发中 我们往往会遇到需要用户输入时间的问题,HTML没有专门的时间控件,我们可以使用JAVASCRIPT实现我们自己的 时间控件,方便用户输入.我们可以在date.js文件中实现时间控件的所有功能,然后在对应的JSP文件中直接引用date.js文件即可,date.js文件内容如下

isIE = (document.all ? true : false);

function getIEPosX(elt) { return getIEPos(elt,"Left"); }
function getIEPosY(elt) { return getIEPos(elt,"Top"); }
function getIEPos(elt,which) {
 iPos = 0
 while (elt!=null) {
  iPos += elt["offset" + which]
  elt = elt.offsetParent
 }
 return iPos
}

function getXBrowserRef(eltname) {
 return (isIE ? document.all[eltname].style : document.layers[eltname]);
}

function hideElement(eltname) { getXBrowserRef(eltname).visibility = 'hidden'; }

// 按不同的浏览器进行处理元件的位置
function moveBy(elt,deltaX,deltaY) {
 if (isIE) {
  elt.left = elt.pixelLeft + deltaX;
  elt.top = elt.pixelTop + deltaY;
 } else {
  elt.left += deltaX;
  elt.top += deltaY;
 }
}

function toggleVisible(eltname) {
 elt = getXBrowserRef(eltname);
 if (elt.visibility == 'visible' || elt.visibility == 'show') {
   elt.visibility = 'hidden';
 } else {
   fixPosition(eltname);
   elt.visibility = 'visible';
 }
}

function setPosition(elt,positionername,isPlacedUnder) {
 positioner = null;
 if (isIE) {
  positioner = document.all[positionername];
  elt.left = getIEPosX(positioner);
  elt.top = getIEPosY(positioner);
 } else {
  positioner = document.images[positionername];
  elt.left = positioner.x;
  elt.top = positioner.y;
 }
 if (isPlacedUnder) { moveBy(elt,0,positioner.height); }
}

 

         // 判断浏览器         isIE = (document.all ? true : false);

         // 初始月份及各月份天数数组
     var months = new Array("一　月", "二　月", "三　月", "四　月", "五　月", "六　月", "七　月",
     "八　月", "九　月", "十　月", "十一月", "十二月");
     var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,
            30, 31, 30, 31);
     var displayMonth = new Date().getMonth();
     var displayYear = new Date().getFullYear();
     var displayDivName;
     var displayElement;

         function getDays(month, year) {
            //测试选择的年份是否是润年？
            if (1 == month)
               return ((0 == year % 4) && (0 != (year % 100))) ||
                  (0 == year % 400) ? 29 : 28;
            else
               return daysInMonth[month];
         }

         function getToday() {
            // 得到今天的日期
            this.now = new Date();
            this.year = this.now.getFullYear();
            this.month = this.now.getMonth();
            this.day = this.now.getDate();
         }

         // 并显示今天这个月份的日历
         today = new getToday();

         function newCalendar(eltName,attachedElement) {
        if (attachedElement) {
           if (displayDivName && displayDivName != eltName) hideElement(displayDivName);
           displayElement = attachedElement;
        }
        displayDivName = eltName;
            today = new getToday();
            var parseYear = parseInt(displayYear + '');
            var newCal = new Date(parseYear,displayMonth,1);
            var day = -1;
            var startDayOfWeek = newCal.getDay();
            if ((today.year == newCal.getFullYear()) &&
                  (today.month == newCal.getMonth()))
        {
               day = today.day;
            }
            var intDaysInMonth =
               getDays(newCal.getMonth(), newCal.getFullYear());
            var daysGrid = makeDaysGrid(startDayOfWeek,day,intDaysInMonth,newCal,eltName)
        if (isIE) {
           var elt = document.all[eltName];
           elt.innerHTML = daysGrid;
        } else {
           var elt = document.layers[eltName].document;
           elt.open();
           elt.write(daysGrid);
           elt.close();
        }
     }

     function incMonth(delta,eltName) {
       displayMonth += delta;
       if (displayMonth >= 12) {
         displayMonth = 0;
         incYear(1,eltName);
       } else if (displayMonth <= -1) {
         displayMonth = 11;
         incYear(-1,eltName);
       } else {
         newCalendar(eltName);
       }
     }

     function incYear(delta,eltName) {
       displayYear = parseInt(displayYear + '') + delta;
       newCalendar(eltName);
     }

     function makeDaysGrid(startDay,day,intDaysInMonth,newCal,eltName) {
        var daysGrid;
        var month = newCal.getMonth();
        var year = newCal.getFullYear();
        var isThisYear = (year == new Date().getFullYear());
        var isThisMonth = (day > -1)
        daysGrid = '<table border=1 cellspacing=0 cellpadding=2><tr><td bgcolor=#ffffff nowrap>';
        daysGrid += '<font face="courier new, courier" size=2>';
        daysGrid += '<a href="javascript:hideElement(/'' + eltName + '/')">x</a>';
        daysGrid += '&nbsp;&nbsp;';
        daysGrid += '<a href="javascript:incMonth(-1,/'' + eltName + '/')">&laquo; </a>';

        daysGrid += '<b>';
        if (isThisMonth) { daysGrid += '<font color=red>' + months[month] + '</font>'; }
        else { daysGrid += months[month]; }
        daysGrid += '</b>';

        daysGrid += '<a href="javascript:incMonth(1,/'' + eltName + '/')"> &raquo;</a>';
        daysGrid += '&nbsp;&nbsp;&nbsp;';
        daysGrid += '<a href="javascript:incYear(-1,/'' + eltName + '/')">&laquo; </a>';

        daysGrid += '<b>';
        if (isThisYear) { daysGrid += '<font color=red>' + year + '</font>'; }
        else { daysGrid += ''+year; }
        daysGrid += '</b>';

        daysGrid += '<a href="javascript:incYear(1,/'' + eltName + '/')"> &raquo;</a><br>';
        daysGrid += '&nbsp;Su Mo Tu We Th Fr Sa&nbsp;<br>&nbsp;';
        var dayOfMonthOfFirstSunday = (7 - startDay + 1);
        for (var intWeek = 0; intWeek < 6; intWeek++) {
           var dayOfMonth;
           for (var intDay = 0; intDay < 7; intDay++) {
             dayOfMonth = (intWeek * 7) + intDay + dayOfMonthOfFirstSunday - 7;
         if (dayOfMonth <= 0) {
               daysGrid += "&nbsp;&nbsp; ";
         } else if (dayOfMonth <= intDaysInMonth) {
           var color = "blue";
           if (day > 0 && day == dayOfMonth) color="red";
           daysGrid += '<a href="javascript:setDay(';
           daysGrid += dayOfMonth + ',/'' + eltName + '/')" '
           daysGrid += 'style="color:' + color + '">';
           var dayString = dayOfMonth + "</a> ";
           if (dayString.length == 6) dayString = '0' + dayString;
           daysGrid += dayString;
         }
           }
           if (dayOfMonth < intDaysInMonth) daysGrid += "<br>&nbsp;";
        }
        return daysGrid + "</td></tr></table>";
     }

     function setDay(day,eltName) {
     //  displayElement.value = (displayMonth + 1) + "/" + day + "/" + displayYear;
            outMonth = ""+(displayMonth+1);
              if(displayMonth < 9) {
                outMonth = "0"+outMonth;
              }
              outDay = "" + day;
              if(day < 10) {
                outDay = "0"+day;
              }
              displayElement.value = displayYear+"-"+outMonth + "-" + outDay  ;

       hideElement(eltName);
     }

//——————————————————————————————————————

// fixPosition() 这个函数和前面所讲的那个函数一样//
function fixPosition(eltname) {
 elt = getXBrowserRef(eltname);
 positionerImgName = eltname + 'Pos';
 // hint: try setting isPlacedUnder to false
 isPlacedUnder = false;
 if (isPlacedUnder) {
  setPosition(elt,positionerImgName,true);
 } else {
  setPosition(elt,positionerImgName)
 }
}

function toggleDatePicker(eltName,formElt) {
  var x = formElt.indexOf('.');
  var formName = formElt.substring(0,x);
  var formEltName = formElt.substring(x+1);
  newCalendar(eltName,document.forms[formName].elements[formEltName]);
  toggleVisible(eltName);
}

function MoveUp(SelectList)
 {
 var nIndex = SelectList.selectedIndex;
 if (nIndex == -1)
  {
  alert("请先选一项呢！");
  return;
  }

 if (nIndex == 0)
  {
  return;
  }

 var objSelected = new Option(SelectList[nIndex].text, SelectList[nIndex].value);
 var objPrevious = new Option(SelectList[nIndex-1].text, SelectList[nIndex-1].value);
 SelectList.options[nIndex] = objPrevious;
 SelectList.options[nIndex-1] = objSelected;

 SelectList.options[nIndex-1].selected = true;
 }

function MoveDown(SelectList)
 {
 var nIndex = SelectList.selectedIndex;
 if (nIndex == -1)
  {
  alert("请先选一项呢！");
  return;
  }

 if (nIndex == SelectList.options.length-1)
  {
  return;
  }

 var objSelected = new Option(SelectList[nIndex].text, SelectList[nIndex].value);
 var objPrevious = new Option(SelectList[nIndex+1].text, SelectList[nIndex+1].value);
 SelectList.options[nIndex] = objPrevious;
 SelectList.options[nIndex+1] = objSelected;

 SelectList.options[nIndex+1].selected = true;
 }

function Move(SourceList,TargetList)
 {
 var nIndex = SourceList.selectedIndex;
 if (nIndex == -1)
  {
  alert("请先选一项呢！");
  return;
  }

 var objSelected = new Option(SourceList[nIndex].text, SourceList[nIndex].value);
 TargetList.options[TargetList.length] = objSelected;
 SourceList.options[nIndex] = null;

 TargetList.options[TargetList.length-1].selected = true;
 if(navigator.appName=="Netscape")
  {
  history.go(0)
  }
 }

function MoveAll(SourceList,TargetList)
 {
 var nIndex = SourceList.selectedIndex;
 if (nIndex == -1){
  alert("请先选一项呢！");
  return;
 }

 var len = SourceList.length;
 var start = 0;
 for( i=0;i<len;i++)
 {
  nIndex = SourceList.selectedIndex;
  if (nIndex == -1){
        return;
        }
  var objSelected = new Option(SourceList[nIndex].text, SourceList[nIndex].value);
  TargetList.options[TargetList.length] = objSelected;
  SourceList.options[nIndex] = null;
  TargetList.options[TargetList.length-1].selected = true;
 }

 if(navigator.appName=="Netscape")
  {
  history.go(0)
  }
 }

function SaveLayout(SelectList,strResult)
 {
 var result="0";
 for (i=0;i<SelectList.length;i++)
  {
  result = result+","+SelectList.options[i].value;
  }
 strResult.value = result;
 }

这样当我们在JSP页面要使用时间控件时,只要引入date.js即可,代码如下所示

<script type='text/javascript' src=js/date.js'></script>

 <tr>
    <td width="110" align="right" class="data_td">开始：</td>
    <td align="left" bgcolor="#FFFFFF"  class="data_tr"> 
    <input type="text" name="startDate" readonly="true" size="20" value="<%=startDate%>"/>
             
         <img  οnmοuseup="toggleDatePicker('daysOfMonth','0.startDate')" id=daysOfMonthpos height=21 alt="date picker" src="img/calendaricon.gif" width=34 align=absMiddle border=0 name=daysOfMonthPos>
         <div id=daysOfMonth style="POSITION: absolute"></div></td>
  </tr>