js 时间控件，时间选择器，点文本框显示时间选择

欢迎访问广告之家：http://www.adggs.com

    最近做项目的时候，用到日期控件，我就再去找了个，发现这个蛮好的，风格不错，而且很实用，所以使用它了，希望大家也喜欢！

下面是截图：

------------------------------------------------------------------------------------------

如果使用的朋友请在同一目录下面新建以下2个文件可以得到效果：

date.js

//// Powered by: amo
//// QQ:48176084
//// Email & MSN :phoubes@hotmail.com

function PopupCalendar(InstanceName)
{
///Global Tag
this.instanceName=InstanceName;
///Properties
this.separator="-"
this.oBtnTodayTitle="Today"
this.oBtnCancelTitle="Cancel"
this.weekDaySting=new Array("S","M","T","W","T","F","S");
this.monthSting=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
this.Width=200;
this.currDate=new Date();
this.today=new Date();
this.startYear=1950;
this.endYear=2010;
///Css
this.divBorderCss="1px solid #BCD0DE";
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+"oDiv";
this.sTABLEID=InstanceName+"oTable";
this.sMONTHID=InstanceName+"oMonth";
this.sYEARID=InstanceName+"oYear";

}
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;"+this.Width+";border:"+this.divBorderCss+";padding:2px;background-color:#FFFFFF'>";
htmlAll+="<div align='center'>";
/// Month
htmloMonth="<select id='"+this.sMONTHID+"' onchange=CalendarMonthChange("+this.instanceName+") style='50%'>";
for(i=0;i<12;i++)
{   
   htmloMonth+="<option value='"+i+"'>"+this.monthSting[i]+"</option>";
}
htmloMonth+="</select>";
/// Year
htmloYear="<select id='"+this.sYEARID+"' onchange=CalendarYearChange("+this.instanceName+") style='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='#98B8CD'>";
   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+=" onmouseover=CalendarCellsMsOver("+this.instanceName+")";
     htmloDayTable+=" onmouseout=CalendarCellsMsOut("+this.instanceName+")";
     htmloDayTable+=" onclick=CalendarCellsClick(this,"+this.instanceName+")>";
     htmloDayTable+="&nbsp;</td>"
    }
   }
   htmloDayTable+="</tr>";
}
htmloDayTable+="</tbody></table>";
/// Today Button
htmloButton="<div align='center' style='padding:3px'>"
htmloButton+="<button style='40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
htmloButton+=" onclick=CalendarTodayClick("+this.instanceName+")>"+this.oBtnTodayTitle+"</button>&nbsp;"
htmloButton+="<button style='40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
htmloButton+=" onclick=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,sDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear
sMonth=this.currDate.getMonth();
sYear=this.currDate.getYear();
sWeekDay=(new Date(sYear,sMonth,1)).getDay();
sToday=this.currDate.getDate();
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(sDaySn=1,sIndex=sWeekDay;sIndex<=6;sDaySn++,sIndex++)
{

   if(sDaySn==sToday)
   {
    currRow.cells[sIndex].innerHTML="<font color=red><i><b>"+sDaySn+"</b></i></font>";
    this.oPreviousCell=currRow.cells[sIndex];
   }
   else
   {
    currRow.cells[sIndex].innerHTML=sDaySn;
    currRow.cells[sIndex].style.color="#666666";
   }
   CalendarCellSetCss(0,currRow.cells[sIndex]);
}
for(rowIndex=2;rowIndex<=6;rowIndex++)
{
   if(sDaySn>MaxDay)break;
   currRow=oTable.rows[rowIndex];
   for(cellIndex=0;cellIndex<currRow.cells.length;cellIndex++)
   {
    if(sDaySn==sToday)
    {
     currRow.cells[cellIndex].innerHTML="<font color=red><i><b>"+sDaySn+"</b></i></font>";
     this.oPreviousCell=currRow.cells[cellIndex];
    }
    else
    {
     currRow.cells[cellIndex].innerHTML=sDaySn;
     currRow.cells[cellIndex].style.color="#666666";
    }
    CalendarCellSetCss(0,currRow.cells[cellIndex]);
    sDaySn++;
    if(sDaySn>MaxDay)break;
   }
}
}
function CalendarRestore()      /// Clear Data
{
var 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="&nbsp;";
   }
}
}
function CalendarRefresh(newDate)      ///
{
this.currDate=newDate;
this.Restore();
this.Fill();
}
function CalendarCellsMsOver(oInstance)     /// Cell MouseOver
{
var myCell
myCell=event.srcElement;
CalendarCellSetCss(0,oInstance.oPreviousCell);
if(myCell)
{
   CalendarCellSetCss(1,myCell);
   oInstance.oPreviousCell=myCell;
}
}
function CalendarCellsMsOut(oInstance)     ////// Cell MouseOut
{
var myCell
myCell=event.srcElement;
CalendarCellSetCss(0,myCell);
}
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=="INPUT")
{
   oInstance.oTaget.value=sDateString;
}
document.all[oInstance.sDIVID].style.display="none";  
}
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 CalendarTodayClick(oInstance)     /// "Today" button Change
{
oInstance.Refresh(new Date());  
}
function getDateString(oInputSrc,oInstance)
{
if(oInputSrc&&oInstance)
{
   CalendarDiv=document.all[oInstance.sDIVID];
   oInstance.oTaget=oInputSrc;
   CalendarDiv.style.pixelLeft=(CalendargetPos(oInputSrc,"Left")+135);
   CalendarDiv.style.pixelTop=CalendargetPos(oInputSrc,"Top");
   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
{
CalendarDiv=document.all[oInstance.sDIVID];
CalendarDiv.style.display="none";  
}

 

test.html

<html>
<script language=javascript src="date.js"></script>
<script>
var oCalendarChs=new PopupCalendar("oCalendarChs"); //初始化控件时,请给出实例名称:oCalendarChs
oCalendarChs.weekDaySting=new Array("日","一","二","三","四","五","六");
oCalendarChs.monthSting=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
oCalendarChs.oBtnTodayTitle="今天";
oCalendarChs.oBtnCancelTitle="取消";
oCalendarChs.Init();
</script>
<table>
<tr>
<td>
<input readonly type="text" name="birthday" onclick="getDateString(this,oCalendarChs)" value="1987-11-22" size="15">
</td>
</tr>
</table>
</html>

 

这个js代码使用起来要注意：必须在文本框内无内容的情况下、或内容是2009-11-22 格式正确的 情况下，上面的点击是好用的，不然的话，会显示日历不完整哦！！

 

 

友情链接：遨游官方论坛：http://www.7v7.cn/?fromuid=177