现在的位置: 首页 > 综合 > 正文

点击输入框显示一个时间选择界面

2013年08月18日 ⁄ 综合 ⁄ 共 8251字 ⁄ 字号 评论关闭

调用的方法: onClick="getDate(this);return false;"

 

页面上的js

function getDate(ctrlobj) {
 showx = event.screenX - event.offsetX - 4 - 210 ; // + deltaX;
 showy = event.screenY - event.offsetY + 18; // + deltaY;
 newWINwidth = 210 + 4 + 18;

 retval = window.showModalDialog("js/calendardlg.jsp", "", "dialogWidth:197px; dialogHeight:210px; dialogLeft:"+showx+"px; dialogTop:"+showy+"px; status:no; directories:yes;scrollbars:no;Resizable=no; "  );
 if( retval != null ) {
  ctrlobj.value = retval;
 }
}

 

calendardlg.jsp内容如下:

<%@ page contentType="text/html; charset=GBK" %>
<HTML><HEAD>
<TITLE>:::::::日期选择::::::</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
<META content="MSHTML 6.00.2600.0" name=GENERATOR>
<SCRIPT language=JavaScript src="showcal.js"></SCRIPT>
</HEAD>
<BODY bgColor="#CFE9F8" onload="fload()">

<SCRIPT>
function fload()
{
 fPopCalendar(document.all.txt1, document.all.txt1);
}

function fkeydown()
{
 if(event.keyCode==27){
  event.returnValue = null;
  window.returnValue = null;
  window.close();
 }
}

document.onkeydown=fkeydown;

</SCRIPT>
<INPUT id=txt1 style="DISPLAY: none" type=button> </BODY></HTML>

 

showcal.js详细内容:

 var gdCtrl = new Object();
 var goSelectTag = new Array();
 var gcGray = "#808080";
 var gcToggle = "#ffffff";
 var gcBG = "#000000";
 var gridbg = "#CFE9F8";
 var previousObject = null;
 
 var gdCurDate = new Date();
 var giYear = gdCurDate.getFullYear();
 var giMonth = gdCurDate.getMonth()+1;
 var giDay = gdCurDate.getDate();
 
 var gCalMode = "";
 var gCalDefDate = "";
 
 var CAL_MODE_NOBLANK = "2";
 
 function fSetDate(iYear, iMonth, iDay){
   //VicPopCal.style.visibility = "hidden";
   if ((iYear == 0) && (iMonth == 0) && (iDay == 0)){
    gdCtrl.value = "";
   }else{
    iMonth = iMonth + 100 + "";
    iMonth = iMonth.substring(1);
    iDay   = iDay + 100 + "";
    iDay   = iDay.substring(1);
    gdCtrl.value = iYear+"-"+iMonth+"-"+iDay;
   }
  
   for (i in goSelectTag)
    goSelectTag[i].style.visibility = "visible";
   goSelectTag.length = 0;
  
   window.returnValue=gdCtrl.value;
   window.close();
 }
 
 function HiddenDiv()
 {
  var i;
   VicPopCal.style.visibility = "hidden";
   for (i in goSelectTag)
    goSelectTag[i].style.visibility = "visible";
   goSelectTag.length = 0;
 
 }
 function fSetSelected(aCell){
   var iOffset = 0;
   var iYear = parseInt(tbSelYear.value);
   var iMonth = parseInt(tbSelMonth.value);
  
   aCell.bgColor = gridbg;
   with (aCell.children["cellText"]){
    var iDay = parseInt(innerText);
    if (color==gcGray)
   iOffset = (Victor<10)?-1:1;
 
  /*** below temp patch by maxiang ***/
  if( color == gcGray ){
   iOffset = (iDay < 15 )?1:-1;
  }
  /*** above temp patch by maxiang ***/
 
  iMonth += iOffset;
  if (iMonth<1) {
   iYear--;
   iMonth = 12;
  }else if (iMonth>12){
   iYear++;
   iMonth = 1;
  }
   }
   fSetDate(iYear, iMonth, iDay);
 }
 
 function Point(iX, iY){
  this.x = iX;
  this.y = iY;
 }
 
 function fBuildCal(iYear, iMonth) {
   var aMonth=new Array();
   for(i=1;i<7;i++)
    aMonth[i]=new Array(i);
  
   var dCalDate=new Date(iYear, iMonth-1, 1);
   var iDayOfFirst=dCalDate.getDay();
   var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
   var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
   var iDate = 1;
   var iNext = 1;
 
   for (d = 0; d < 7; d++)
  aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
   for (w = 2; w < 7; w++)
    for (d = 0; d < 7; d++)
   aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
   return aMonth;
 }
 
 function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) {
   var WeekDay = new Array("日","一","二","三","四","五","六");
   var styleTD = "  bordercolor='#ffffff' valign='middle' align='center' height='"+iCellHeight+"' style='font-size:12px; ";
 
   with (document) {
  write("<tr bgcolor='#D0DCE0'>");
  for(i=0; i<7; i++)
   write("<td "+styleTD+" color:#000000' >" + WeekDay[i] + "</td>");
  write("</tr>");
 
    for (w = 1; w < 7; w++) {
   write("<tr bgcolor='"+gridbg+"'>");
   for (d = 0; d < 7; d++) {
    write("<td id=calCell "+styleTD+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gridbg' title='点击取值' onclick='fSetSelected(this)'>");
    write("<font id=cellText ><b> </b></font>");
    write("</td>")
   }
   write("</tr>");
  }
   }
 }
 
 function fUpdateCal(iYear, iMonth) {
   myMonth = fBuildCal(iYear, iMonth);
   var i = 0;
   for (w = 0; w < 6; w++)
  for (d = 0; d < 7; d++)
   with (cellText[(7*w)+d]) {
    Victor = i++;
    if (myMonth[w+1][d]<0) {
     color = gcGray;
     innerText = -myMonth[w+1][d];
    }else{
     // Modified by maxiang for we need
     // Saturday displayed in blue font color.
     //color = ((d==0)||(d==6))?"red":"black";
     if( d == 0 ){
      color = "red";
     }else if( d == 6 ){
      color = "blue";
     }else{
      color = "black";
     }
     // End of above maxiang
     innerText = myMonth[w+1][d];
    }
   }
 }
 
 function fSetYearMon(iYear, iMon){
   tbSelMonth.options[iMon-1].selected = true;
   for (i = 0; i < tbSelYear.length; i++)
  if (tbSelYear.options[i].value == iYear)
   tbSelYear.options[i].selected = true;
   fUpdateCal(iYear, iMon);
 }
 
 function fPrevMonth(){
   var iMon = tbSelMonth.value;
   var iYear = tbSelYear.value;
  
   if (--iMon<1) {
    iMon = 12;
    iYear--;
   }
  
   fSetYearMon(iYear, iMon);
 }
 
 function fNextMonth(){
   var iMon = tbSelMonth.value;
   var iYear = tbSelYear.value;
  
   if (++iMon>12) {
    iMon = 1;
    iYear++;
   }
  
   fSetYearMon(iYear, iMon);
 }
 
 function fToggleTags(){
   with (document.all.tags("SELECT")){
   for (i=0; i<length; i++)
    if ((item(i).Victor!="Won")&&fTagInBound(item(i))){
     item(i).style.visibility = "hidden";
     goSelectTag[goSelectTag.length] = item(i);
    }
   }
 }
 
 function fTagInBound(aTag){
   with (VicPopCal.style){
    var l = parseInt(left);
    var t = parseInt(top);
    var r = l+parseInt(width);
    var b = t+parseInt(height);
  var ptLT = fGetXY(aTag);
  return !((ptLT.x>r)||(ptLT.x+aTag.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+aTag.offsetHeight<t));
   }
 }
 
 function fGetXY(aTag){
   var oTmp = aTag;
   var pt = new Point(0,0);
   do {
    pt.x += oTmp.offsetLeft;
    pt.y += oTmp.offsetTop;
    oTmp = oTmp.offsetParent;
   } while(oTmp.tagName!="BODY");
   return pt;
 }
 
 // Main: popCtrl is the widget beyond which you want this calendar to appear;
 //       dateCtrl is the widget into which you want to put the selected date.
 // i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc);return false">
 function fPopCalendar(popCtrl, dateCtrl, mode, defDate){
  gCalMode = mode;
  gCalDefDate = defDate;
  
   if (popCtrl == previousObject){
     if (VicPopCal.style.visibility == "visible"){
     //HiddenDiv();
     return true;
    }
    
   }
   previousObject = popCtrl;
   gdCtrl = dateCtrl;
   fSetYearMon(giYear, giMonth);
   var point = fGetXY(popCtrl);
 
  if( gCalMode == CAL_MODE_NOBLANK ){
   document.all.CAL_B_BLANK.style.visibility = "hidden"; 
  }else{
   document.all.CAL_B_BLANK.style.visibility = "visible";
  } 
 
   with (VicPopCal.style) {
    left = point.x;
  top  = point.y+popCtrl.offsetHeight;
  width = VicPopCal.offsetWidth;
  height = VicPopCal.offsetHeight;
  fToggleTags(point);  
  visibility = 'visible';
   }
 }
 
 var gMonths = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
 
 with (document) {
 write("<Div id='VicPopCal' style='OVERFLOW:hidden;POSITION:absolute;VISIBILITY:hidden;border:0px ridge;width:100%;height:100%;top:0;left:0;z-index:100;overflow:hidden'>");
 write("<table border='0' bgcolor='#CFE9F8'>");
 write("<TR bgcolor='#CFE9F8'>");
 write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:23;width:20;FONT:bold' onClick='fPrevMonth()'>");
 write("&nbsp;<SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
 for(i=1930;i<2030;i++)
  write("<OPTION value='"+i+"'>"+i+"年</OPTION>");
 write("</SELECT>");
 write("&nbsp;<select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
 for (i=0; i<12; i++)
  write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
 write("</SELECT>");
 write("&nbsp;<input type='button' name='PrevMonth' value='>' style='height:23;width:20;FONT:bold' onclick='fNextMonth()'>");
 write("</td>");
 write("</TR><TR bgcolor='#9A9A9A'>");
 write("<td align='center'>");
 write("<table width='100%' border='0' cellspacing=1 bgcolor='#9A9A9A'>");
 fDrawCal(giYear, giMonth, 8, '12');
 write("</table></DIV>");
 write("</td>");
 write("</TR><TR  bgcolor='#CFE9F8'><TD align='center'>");
 write("<TABLE width='100%' bgcolor='#CFE9F8'><TR><TD align='center'>");
 write("<B ID=/"CAL_B_BLANK/" style='color:"+gcBG+"; visibility:visible; cursor:hand; font-size:12px' onclick='fSetDate(0,0,0)' onMouseOver='this.style.color=gcToggle'  onMouseOut='this.style.color=gcBG'>清空</B>");
 write("</td><td algin='center'>");
 write("<B style='color:"+gcBG+";cursor:hand; font-size:12px' onclick='fSetDate(giYear,giMonth,giDay)'>今天: "+giYear+"-"+giMonth+"-"+giDay+"</B>");
 write("</td></tr></table>");
 write("</TD></TR>");
 write("</TABLE></Div>");
 }

抱歉!评论已关闭.