selectdatetime.js

日期选择器,javascript编写

  meizzTheYear=yy;
  meizzTheMonth=mm;
  
  for (var i = 0; i < 39; i++){meizzWDay[i]=""};
  var day1 = 1,day2=1,firstday = new Date(yy,mm-1,1).getDay(); 
  for (i=0;i<firstday;i++)meizzWDay[i]=GetMonthCount(mm==1?yy-1:yy,mm==1?12:mm-1)-firstday+i+1
  for (i = firstday; day1 < GetMonthCount(yy,mm)+1; i++){meizzWDay[i]=day1;day1++;}
  for (i=firstday+GetMonthCount(yy,mm);i<39;i++){meizzWDay[i]=day2;day2++}
  for (i = 0; i < 39; i++)
  { var da = eval("odatelayer.meizzDay"+i) 
    if (meizzWDay[i]!="")
      { 
  da.borderColorLight="#448FEB";
  da.borderColorDark="#FFFFFF";
  if(i<firstday) 
  {
   da.innerHTML="<font color=gray>" + meizzWDay[i] + "</font>";
   da.title=(mm==1?12:mm-1) +"月" + meizzWDay[i] + "日";
   da.onclick=Function("meizzDayClick(this.innerText,-1)");
   if(!outDate)
    da.style.backgroundColor = ((mm==1?yy-1:yy) == new Date().getFullYear() && 
     (mm==1?12:mm-1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ?
             "#FFD700":"#C5DFFF";
   else
   {
    da.style.backgroundColor =((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
    meizzWDay[i]==outDate.getDate())? "#00ffff" :
    (((mm==1?yy-1:yy) == new Date().getFullYear() && (mm==1?12:mm-1) == new Date().getMonth()+1 && 
    meizzWDay[i] == new Date().getDate()) ? "#FFD700":"#C5DFFF");
    if((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
    meizzWDay[i]==outDate.getDate())
    {
     da.borderColorLight="#FFFFFF";
     da.borderColorDark="#448FEB";
    }
   }
  }
  else if (i>=firstday+GetMonthCount(yy,mm))
  {
   da.innerHTML="<font color=gray>" + meizzWDay[i] + "</font>";
   da.title=(mm==12?1:mm+1) +"月" + meizzWDay[i] + "日";
   da.onclick=Function("meizzDayClick(this.innerText,1)");
   if(!outDate)
    da.style.backgroundColor = ((mm==12?yy+1:yy) == new Date().getFullYear() && 
     (mm==12?1:mm+1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ?
             "#FFD700":"#C5DFFF";
   else
   {
    da.style.backgroundColor =((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
    meizzWDay[i]==outDate.getDate())? "#00ffff" :
    (((mm==12?yy+1:yy) == new Date().getFullYear() && (mm==12?1:mm+1) == new Date().getMonth()+1 && 
    meizzWDay[i] == new Date().getDate()) ? "#FFD700":"#C5DFFF");
    if((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
    meizzWDay[i]==outDate.getDate())
    {
     da.borderColorLight="#FFFFFF";
     da.borderColorDark="#448FEB";
    }
   }
  }
  else
  {
   da.innerHTML="" + meizzWDay[i] + "";
   da.title=mm +"月" + meizzWDay[i] + "日";
   da.onclick=Function("meizzDayClick(this.innerText,0)"); 
   if(!outDate)
    da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())?
     "#FFD700":"#C5DFFF";
   else
   {
    da.style.backgroundColor =(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())?
     "#00ffff":((yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())?
     "#FFD700":"#C5DFFF");
    //将选中的日期显示为凹下去
    if(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())
    {
     da.borderColorLight="#FFFFFF";
     da.borderColorDark="#448FEB";
    }
   }
  }
        da.style.cursor="hand"
      }
    else{da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"}
  }
}

function meizzDayClick(n,ex,f)  
{
  var yy=meizzTheYear;
  var mm = parseInt(meizzTheMonth)+ex; 
 if(mm<1){
  yy--;
  mm=12+mm;
 }
 else if(mm>12){
  yy++;
  mm=mm-12;
 }
 
  if (mm < 10){mm = "0" + mm;}
  if (outObject)
  {
    if (!n) {
      return;}
    if ( n < 10){n = "0" + n;}
	if (f=="time")
	{
		outObject.value = n;
	}else{
	    outObject.value= yy + "-" + mm + "-" + n ; 
	}
    closeLayer(); 
  }
  else {closeLayer(); alert("您所要输出的控件对象并不存在!");}
}

var strFrame2 = "";
document.writeln('<iframe id=meizzDateLayer2 Author=wayx frameborder=0 style="position: absolute; width: 144px; height: 200px; z-index: 9999; display:none"></iframe>');
strFrame2+='<scr' + 'ipt>';
strFrame2+='var datelayerx,datelayery; /*存放日历控件的鼠标位置*/';
strFrame2+='var bDrag; /*标记是否开始拖动*/';
strFrame2+='function document.onmousemove() /*在鼠标移动事件中，如果开始拖动日历，则移动日历*/';
strFrame2+='{if(bDrag && window.event.button==1)';
strFrame2+=' {var DateLayer=parent.document.all.meizzDateLayer2.style;';
strFrame2+='  DateLayer.posLeft += window.event.clientX-datelayerx;/*由于每次移动以后鼠标位置都恢复为初始的位置，因此写法与div中不同*/';
strFrame2+='  DateLayer.posTop += window.event.clientY-datelayery;}}';
strFrame2+='function DragStart()  /*开始日历拖动*/';
strFrame2+='{var DateLayer=parent.document.all.meizzDateLayer2.style;';
strFrame2+=' datelayerx=window.event.clientX;';
strFrame2+=' datelayery=window.event.clientY;';
strFrame2+=' bDrag=true;}';
strFrame2+='function DragEnd(){  /*结束日历拖动*/';
strFrame2+=' bDrag=false;}';
strFrame2+='</scr' + 'ipt>';
strFrame2+='<div style="z-index:9999;position: absolute; left:0; top:0; background-color:#e9f3ff; border:2px solid #448feb;padding:1px height:200px;height:200px; width:144px;text-align:center;font-size:12px;" onselectstart="return false">';
strFrame2+='<h1 Author="wayx" style="text-align:left;background-color:#448feb;font-size:12px;font-weight:normal;color:#fff;height:22px;line-height:22px;margin:0px;padding:0px 5px 0px 5px;cursor:' + (bMoveable ? 'move':'default') + '" '+(bMoveable? 'onmousedown="DragStart()" onmouseup="DragEnd()"':'')+'><a href=javascript:void(0) style=\'float:right;text-decoration:none;color:#fff\' onclick=parent.closeLayer()>&times;</a>选择时间</h1>';
strFrame2+='<br><span id="nowhour"></span>';
strFrame2+='</div>';
strFrame2+='<scr' + 'ipt>';
strFrame2+='setInterval("RealTime()",1000);';
strFrame2+='function RealTime(){';
strFrame2+='	var d = new Date();';
strFrame2+='	var hour = d.getHours();';
strFrame2+='	var minute = d.getMinutes();';
strFrame2+='	var second = d.getSeconds();';
strFrame2+='	if(hour<10) hour=0+hour.toString();';
strFrame2+='	if(minute<10) minute=0+minute.toString();';
strFrame2+='	if(second<10) second=0+second.toString();';
strFrame2+='	document.getElementById(\'realtime\').value = hour + ":" + minute + ":" + second;';
strFrame2+='}';
strFrame2+=' function getTime() {';
strFrame2+='    var sTime;';
strFrame2+='    sTime = document.all.hour.value + ":" + document.all.minute.value + ":" + document.all.second.value;';
strFrame2+='	parent.meizzDayClick(sTime,0,\'time\');';
strFrame2+='	parent.closeLayer();';
strFrame2+=' }';

strFrame2+='var timestr;';
strFrame2+='timestr = "<div id=TimeLayer style=\'background-color:#E9F3FF;\'>";';
strFrame2+='timestr+="<div style=\'margin-bottom:10px;\'>小时:<select id=hour name=hour>";';
strFrame2+='var d = new Date();';
strFrame2+=' for (var i=0; i<24;  i++){';
strFrame2+='	i<10?j=0+i.toString():j=i;';
strFrame2+='		if (d.getHours().toString()==i)';
strFrame2+='		{';
strFrame2+='			timestr+="<OPTION VALUE= " + j + " selected>" + j + "</option>";';
strFrame2+='		}else{';
strFrame2+='			timestr+="<OPTION VALUE= " + j + ">" + j + "</option>";';
strFrame2+='		}';
strFrame2+='	 }';
strFrame2+='	timestr+="</select></div><div style=\'margin-bottom:10px;\'>分钟:<select id=minute  name=minute class=smallSel>";';
strFrame2+='	 for (var i=0; i<60;  i++){';
strFrame2+='		i<10?j=0+i.toString():j=i;';
strFrame2+='		if (d.getMinutes().toString()==i)';
strFrame2+='		{';
strFrame2+='			 timestr+="<OPTION VALUE= " + j + " selected>" + j + "</option>";';
strFrame2+='		}else{';
strFrame2+='			 timestr+="<OPTION VALUE= " + j + ">" + j + "</option>";';
strFrame2+='		}';
strFrame2+='	}';
strFrame2+='	timestr+="</select></div><div style=\'margin-bottom:10px;\'>秒钟:<select id=second name=second class=smallSel>";';
strFrame2+='	 for (var i=0; i<60;  i++){';
strFrame2+=' 		i<10?j=0+i.toString():j=i;';
strFrame2+='		if (d.getSeconds().toString() == i)';
strFrame2+='		{';
strFrame2+='			timestr+="<OPTION VALUE= " + j + " selected>" + j + "</option>";';
strFrame2+='		}else{';
strFrame2+='			timestr+="<OPTION VALUE= " + j + ">" + j + "</option>";';
strFrame2+='		}';
strFrame2+='	}';
strFrame2+='	timestr+="</select></div><div><input type=button id=realtime onclick=parent.meizzDayClick(this.value,0,\'time\') value=\'12:34:56\'></div>";';
strFrame2+='	timestr+="<div style=\'margin:10px;\'><a href=javascript:void(0) onclick=getTime() style=color:#000>确定</a>&nbsp;&nbsp;&nbsp;&nbsp;";';
strFrame2+='	timestr+="<a href=javascript:void(0) onclick=parent.closeLayer() style=color:#000>取消</a></div>";';
strFrame2+='	timestr+="</div>";';
strFrame2+='	document.getElementById("nowhour").innerHTML = timestr;';
strFrame2+='</scr' + 'ipt>';

window.frames.meizzDateLayer2.document.writeln(strFrame2);
window.frames.meizzDateLayer2.document.close(); 

function selectTime(tt,obj)
{
 document.getElementById('meizzDateLayer').style.display="none";
 if (arguments.length >  2){alert("对不起!传入本控件的参数太多!");return;}
 if (arguments.length == 0){alert("对不起!您没有传回本控件任何参数!");return;}
 var dads  = document.all.meizzDateLayer2.style;
 var th = tt;
 var ttop  = tt.offsetTop; 
 var thei  = tt.clientHeight;
 var tleft = tt.offsetLeft; 
 var ttyp  = tt.type;       
 while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
 dads.top  = (ttyp=="image")? ttop+thei : ttop+thei+6;
 dads.left = tleft;
 outObject = (arguments.length == 1) ? th : obj;
 outButton = (arguments.length == 1) ? null : th;
 dads.display = '';
 event.returnValue=false;
}