纯javascript编写js日期控件

</pre><pre name="code" class="javascript">

function PopupCalendar(InstanceName)
{
 ///Global Tag
 this.instanceName=InstanceName;
 ///Properties
 this.separator="-"
 this.oBtnTodayTitle="����"
 this.oBtnCancelTitle="ȡ��"
 //oCalendarChs.oBtnTodayTitle="����";
 //oCalendarChs.oBtnCancelTitle="ȡ��";
 //this.weekDaySting=new Array("S","M","T","W","T","F","S");
 this.weekDaySting=new Array("��","һ","��","��","��","��","��");
 //this.monthSting=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
 this.monthSting=new Array("һ��","����","����","����","����","����","����","����","����","ʮ��","ʮһ��","ʮ����");
 this.Width=200;
 this.currDate=new Date();
 this.today=new Date();
 this.startYear=1950;
 this.endYear=2050;
 ///Css
 this.normalfontColor="#666666";
 this.selectedfontColor="red";
 this.divBorderCss="1px solid #BCD0DE";
 this.titleTableBgColor="#98B8CD";
 this.tableBorderColor="#CCCCCC"
 ///Method
 this.Init=CalendarInit;
 this.Fill=CalendarFill;
 this.Refresh=CalendarRefresh;
 this.Restore=CalendarRestore;
 ///HTMLObject
 this.oTaget=null;
 this.oPreviousCell=null;
 this.sDIVID=InstanceName+"_Div";
 this.sTABLEID=InstanceName+"_Table";
 this.sMONTHID=InstanceName+"_Month";
 this.sYEARID=InstanceName+"_Year";
 this.sTODAYBTNID=InstanceName+"_TODAYBTN";
 
}
function CalendarInit()    ///Create panel
{
 var sMonth,sYear
 sMonth=this.currDate.getMonth();
 sYear=this.currDate.getYear();
 htmlAll="<div id='"+this.sDIVID+"' style='display:none;position:absolute;width:"+this.Width+";border:"+this.divBorderCss+";padding:2px;background-color:#FFFFFF'>";
 htmlAll+="<div align='center'>";
 /// Month
 htmloMonth="<select id='"+this.sMONTHID+"' οnchange=CalendarMonthChange("+this.instanceName+") style='width:50%'>";
 for(i=0;i<12;i++)
 {   
  htmloMonth+="<option value='"+i+"'>"+this.monthSting[i]+"</option>";
 }
 htmloMonth+="</select>";
 /// Year
 htmloYear="<select id='"+this.sYEARID+"' οnchange=CalendarYearChange("+this.instanceName+") style='width:50%'>";
 for(i=this.startYear;i<=this.endYear;i++)
 {
  htmloYear+="<option value='"+i+"'>"+i+"</option>";
 }
 htmloYear+="</select></div>";
 /// Day
 htmloDayTable="<table id='"+this.sTABLEID+"' width='100%' border=0 cellpadding=0 cellspacing=1 bgcolor='"+this.tableBorderColor+"'>";
 htmloDayTable+="<tbody bgcolor='#ffffff'style='font-size:13px'>";
 for(i=0;i<=6;i++)
 {
  if(i==0)
   htmloDayTable+="<tr bgcolor='" + this.titleTableBgColor + "'>";
  else
   htmloDayTable+="<tr>";
  for(j=0;j<7;j++)
  {

   if(i==0)
   {
    htmloDayTable+="<td height='20' align='center' valign='middle' style='cursor:hand'>";
    htmloDayTable+=this.weekDaySting[j]+"</td>"
   }
   else
   {
    htmloDayTable+="<td height='20' align='center' valign='middle' style='cursor:hand'";
    htmloDayTable+=" οnmοuseοver=CalendarCellsMsOver("+this.instanceName+")";
    htmloDayTable+=" οnmοuseοut=CalendarCellsMsOut("+this.instanceName+")";
    htmloDayTable+=" οnclick=CalendarCellsClick(this,"+this.instanceName+")>";
    htmloDayTable+=" </td>"
   }
  }
  htmloDayTable+="</tr>"; 
 }
 htmloDayTable+="</tbody></table>";
 /// Today Button
 htmloButton="<div align='center' style='padding:3px'>"
 htmloButton+="<button id='"+this.sTODAYBTNID+"' style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
 htmloButton+=" οnclick=CalendarTodayClick("+this.instanceName+")>"+this.oBtnTodayTitle+"</button> "
 htmloButton+="<button style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
 htmloButton+=" οnclick=CalendarCancel("+this.instanceName+")>"+this.oBtnCancelTitle+"</button> "
 htmloButton+="</div>"
 /// All
 htmlAll=htmlAll+htmloMonth+htmloYear+htmloDayTable+htmloButton+"</div>";
 document.write(htmlAll);
 this.Fill(); 
}
function CalendarFill()   ///
{
 var sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,iDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear
 sMonth=this.currDate.getMonth();
 sYear=this.currDate.getYear();
 sWeekDay=(new Date(sYear,sMonth,1)).getDay();
 sToday=this.currDate.getDate();
 iDaySn=1
 oTable=document.all[this.sTABLEID];
 currRow=oTable.rows[1];
 MaxDay=CalendarGetMaxDay(sYear,sMonth);
 
 oSelectMonth=document.all[this.sMONTHID]
 oSelectMonth.selectedIndex=sMonth;
 oSelectYear=document.all[this.sYEARID]
 for(i=0;i<oSelectYear.length;i++)
 {
  if(parseInt(oSelectYear.options[i].value)==sYear)oSelectYear.selectedIndex=i;
 }
 
 for(rowIndex=1;rowIndex<=6;rowIndex++)
 {
  if(iDaySn>MaxDay)break;
  currRow = oTable.rows[rowIndex];
  cellIndex = 0;
  if(rowIndex==1)cellIndex = sWeekDay;
  for(;cellIndex<currRow.cells.length;cellIndex++)
  {
   if(iDaySn==sToday)
   {
    currRow.cells[cellIndex].innerHTML="<font color='"+this.selectedfontColor+"'><i><b>"+iDaySn+"</b></i></font>";
    this.oPreviousCell=currRow.cells[cellIndex];
   }
   else
   {
    currRow.cells[cellIndex].innerHTML=iDaySn; 
    currRow.cells[cellIndex].style.color=this.normalfontColor;
   }
   CalendarCellSetCss(0,currRow.cells[cellIndex]);
   iDaySn++;
   if(iDaySn>MaxDay)break; 
  }
 }
}
function CalendarRestore()     /// Clear Data
{ 
 var i,j,oTable
 oTable=document.all[this.sTABLEID]
 for(i=1;i<oTable.rows.length;i++)
 {
  for(j=0;j<oTable.rows[i].cells.length;j++)
  {
   CalendarCellSetCss(0,oTable.rows[i].cells[j]);
   oTable.rows[i].cells[j].innerHTML=" ";
  }
 } 
}
function CalendarRefresh(newDate)     ///
{
 this.currDate=newDate;
 this.Restore(); 
 this.Fill(); 
}
function CalendarCellsMsOver(oInstance)    /// Cell MouseOver
{
 var myCell = event.srcElement;
 CalendarCellSetCss(0,oInstance.oPreviousCell);
 if(myCell)
 {
  CalendarCellSetCss(1,myCell);
  oInstance.oPreviousCell=myCell;
 }
}
function CalendarCellsMsOut(oInstance)    // Cell MouseOut
{
 var myCell = event.srcElement;
 CalendarCellSetCss(0,myCell); 
}
function CalendarYearChange(oInstance)    /// Year Change
{
 var sDay,sMonth,sYear,newDate
 sDay=oInstance.currDate.getDate();
 sMonth=oInstance.currDate.getMonth();
 sYear=document.all[oInstance.sYEARID].value
 newDate=new Date(sYear,sMonth,sDay);
 oInstance.Refresh(newDate);
}
function CalendarMonthChange(oInstance)    /// Month Change
{
 var sDay,sMonth,sYear,newDate
 sDay=oInstance.currDate.getDate();
 sMonth=document.all[oInstance.sMONTHID].value
 sYear=oInstance.currDate.getYear();
 newDate=new Date(sYear,sMonth,sDay);
 oInstance.Refresh(newDate); 
}
function CalendarCellsClick(oCell,oInstance)
{
 var sDay,sMonth,sYear,newDate
 sYear=oInstance.currDate.getFullYear();
 sMonth=oInstance.currDate.getMonth();
 sDay=oInstance.currDate.getDate();
 if(oCell.innerText!=" ")
 {
  sDay=parseInt(oCell.innerText);
  if(sDay!=oInstance.currDate.getDate())
  {
   newDate=new Date(sYear,sMonth,sDay);
   oInstance.Refresh(newDate);
  }
 }
 sDateString=sYear+oInstance.separator+CalendarDblNum(sMonth+1)+oInstance.separator+CalendarDblNum(sDay);  ///return sDateString
 if(oInstance.oTaget.tagName.toLowerCase()=="input")oInstance.oTaget.value = sDateString;
 CalendarCancel(oInstance);
 return sDateString;
}
function CalendarTodayClick(oInstance)    /// "Today" button Change
{ 
 oInstance.Refresh(new Date());  
}
function getDateString(oInputSrc,oInstance)
{
 if(oInputSrc&&oInstance) 
 {
  var CalendarDiv=document.all[oInstance.sDIVID];
  oInstance.oTaget=oInputSrc;
  CalendarDiv.style.pixelLeft=CalendargetPos(oInputSrc,"Left");
  CalendarDiv.style.pixelTop=CalendargetPos(oInputSrc,"Top") + oInputSrc.offsetHeight;
  CalendarDiv.style.display=(CalendarDiv.style.display=="none")?"":"none"; 
 } 
}
function CalendarCellSetCss(sMode,oCell)   /// Set Cell Css
{
 // sMode
 // 0: OnMouserOut 1: OnMouseOver 
 if(sMode)
 {
  oCell.style.border="1px solid #5589AA";
  oCell.style.backgroundColor="#BCD0DE";
 }
 else
 {
  oCell.style.border="1px solid #FFFFFF";
  oCell.style.backgroundColor="#FFFFFF";
 } 
}
function CalendarGetMaxDay(nowYear,nowMonth)   /// Get MaxDay of current month
{
 var nextMonth,nextYear,currDate,nextDate,theMaxDay,
 nextMonth=nowMonth+1;
 if(nextMonth>11)
 {
  nextYear=nowYear+1;
  nextMonth=0;
 }
 else 
 {
  nextYear=nowYear; 
 }
 currDate=new Date(nowYear,nowMonth,1);
 nextDate=new Date(nextYear,nextMonth,1);
 theMaxDay=(nextDate-currDate)/(24*60*60*1000);
 return theMaxDay;
}
function CalendargetPos(el,ePro)    /// Get Absolute Position
{
 var ePos=0;
 while(el!=null)
 {  
  ePos+=el["offset"+ePro];
  el=el.offsetParent;
 }
 return ePos;
}
function CalendarDblNum(num)
{
 if(num < 10) 
  return "0"+num;
 else
  return num;
}
function CalendarCancel(oInstance)   ///Cancel
{
 var CalendarDiv=document.all[oInstance.sDIVID];
 CalendarDiv.style.display="none";  
}

</pre><pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>页面</title>
 </head>
<script language="javascript" src="jscript/PopupCalendar.js"></script>

<script language="javascript">
	//日期控件的JS
	var oCalendarChs=new PopupCalendar("oCalendarChs"); //初始化控件时,请给出实例名称:oCalendarChs
	oCalendarChs.weekDaySting=new Array("日","一","二","三","四","五","六");
	oCalendarChs.monthSting=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
	oCalendarChs.oBtnTodayTitle="今天";
	oCalendarChs.oBtnCancelTitle="取消";
	oCalendarChs.Init();
	
	
function subm1(){
		var begin = document.getElementById("beginTime").value;
//			alert(begin);
		var end = document.getElementById("endTime").value;
//			alert(end);
		if(duibi(begin, end)){
				showError("rqDiv","日期可用",true);
				document.getElementById("myForm1").submit();
			}else{
				showError("rqDiv","结束时间必须>=开始时间",false);
			}
	}
function subm2(){
	//限制时间必须小于2013-01-01
	var limitTime = "2013-01-01";

		var begin = document.getElementById("beginTime2").value;
//			alert(begin);
		var end = document.getElementById("endTime2").value;
//			alert(end);
		if(begin){
			if(!duibi(limitTime, begin)){
				showError("rqDiv2","开始时间必须>=2013年01月01日",false);
        		return;
			}
		}else{
			begin = limitTime;
		}
		if(duibi(begin, end)){
				showError("rqDiv2","日期可用",true);
				document.getElementById("myForm2").submit();
			}else{
				showError("rqDiv2","结束时间必须>=开始时间",false);
			}
	}
	

//时间比较	
function duibi(a, b) {
    var arr = a.split("-");
    var starttime = new Date(arr[0], arr[1], arr[2]);
    var starttimes = starttime.getTime();

    var arrs = b.split("-");
    var lktime = new Date(arrs[0], arrs[1], arrs[2]);
    var lktimes = lktime.getTime();
    
    if (starttimes > lktimes) {
 //      showError("rqDiv","结束时间必须>=开始时间",false);
        return false;
    }
    else{
 //   	showError("rqDiv","日期可用",true);
        return true;
        }
}




	var xmlhttp;
	
//ajax验证HTBH
    function checkHTBH(htbhTag){
     	var sub = document.getElementById("sub1");
		var htbh = htbhTag.value;
		if(null==htbh || htbh.length!=13){
			showError("errDiv","13位!",false);
			sub.disabled=true;
			return;
		}
		
		
		if(window.XMLHttpRequest){
			//IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActionXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.onreadystatechange=callback;

		xmlhttp.open("GET", "<%=basePath %>checkhtbh.action?htbh="+htbh, true);

		xmlhttp.send();

    }
   //ajax回调函数
    function callback(){
    	if(xmlhttp.readyState==4 && xmlhttp.status==200){
    		var text = xmlhttp.responseText;
    		if(text!="true"){
    			showError("errDiv","error message!",false);
    		}else{
    				showError("errDiv","可用",true);
    				document.getElementById("sub1").disabled=false;
    			}
    	}
    }
    
    
    
    function showError(tagID,errorMsg,flag){
    	var errdiv = document.getElementById(tagID);
    	if(flag){
    		errdiv.innerHTML="<font color='green'>"+errorMsg+"</font>";
    	}
    	else
    	{
    		errdiv.innerHTML="<font color='red'>"+errorMsg+"</font>";
    	}
    }
    
    
    function checkJgbh(tag){
    	var jgbh = tag.value;
    	if(jgbh.length < 6){
    		document.getElementById("sub2").disabled=true;
    		showError("errDiv2","至少前六位!",false);
    	}else{
    		showError("errDiv2","",true);
    		document.getElementById("sub2").disabled=false;
    	}
    }
</script>

  <body>
  	<table bgcolor="#EDF4FE" align="center">
  		<tr>
		  	<td>
			  	<FIELDSET >
			  	<LEGEND>页面一</LEGEND> 
			  	<form action="lxAction" method="post" id="myForm1">
				  	<table border="0">
				  		<tr>
					  		<td align="right">编号:</td>
					  		<td><input type="text" name="htbh" id="htbh" οnblur="checkHTBH(this)"> </td>
					  		<td><div id="errDiv"></div></td>
				  		</tr>
				  		<tr>
				  			<td align="right">期间:</td>
				  			<td><input name="beginTime" id="beginTime" type="text"  οnclick="getDateString(this,oCalendarChs)"></td>
				  			<td>—<input name="endTime" id="endTime" type="text" οnclick="getDateString(this,oCalendarChs)"></td>
				  			<td><div id="rqDiv"></div></td>
				
				  		</tr>
				  		<tr>
				  			<td></td>
				  			<td align="right"><input type="reset" value="清空数据"></td>
				  			<td align="right"><input type="button" id="sub1" value="更新数据" disabled="disabled" οnclick="subm1()"></td>
				  		</tr>
					</table>
				</form>
				</FIELDSET>
			</td>
		</tr>
		<tr></tr>
		<tr></tr>
  		<tr>
		  	<td>
		  		
			  	<FIELDSET >
			  	<LEGEND>页面二</LEGEND> 
			  	<form action="pllxAction" method="post" id="myForm2">
				  	<table border="0">
				  		<tr>
					  		<td align="right">编号:</td>
					  		<td><input type="text" name="jgbh" id="jgbh" οnblur="checkJgbh(this)"> </td>
					  		<td><div id="errDiv2"></div></td>
				  		</tr>
				  		<tr>
				  			<td align="right">期间:</td>
				  			<td><input name="beginTime2" id="beginTime2" type="text" value="2013-01-01" οnclick="getDateString(this,oCalendarChs)"></td>
				  			<td>—<input name="endTime2" id="endTime2" type="text" οnclick="getDateString(this,oCalendarChs)"></td>
				  			<td><div id="rqDiv2"></div></td>
				
				  		</tr>
				  		<tr>
				  			<td></td>
				  			<td align="right"><input type="reset" value="清空数据"></td>
				  			<td align="right"><input type="button" id="sub2" value="更新数据" disabled="disabled" οnclick="subm2()"></td>
				  		</tr>
					</table>
				</form>
				</FIELDSET>
			</td>
		</tr>
	</table>
  	
  </body>
</html>