📄 javascript 日期控件_情系计算机 手气不错www_56logo_cn.htm
字号:
<DIV id=tab><A href="http://hi.baidu.com/zhang20084">主页</A><A class=on
href="http://hi.baidu.com/zhang20084/blog">博客</A><A
href="http://hi.baidu.com/zhang20084/album">相册</A><SPAN>|</SPAN><A
href="http://hi.baidu.com/zhang20084/profile">个人档案</A> <SPAN>|</SPAN><A
href="http://hi.baidu.com/zhang20084/friend">好友</A> </DIV></DIV>
<DIV class=stage>
<DIV class=stagepad>
<DIV style="WIDTH: 100%">
<TABLE class=modth cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=modtl width=7> </TD>
<TD class=modtc noWrap>
<DIV class=modhead><SPAN class=modtit>查看文章</SPAN></DIV></TD>
<TD class=modtc noWrap align=right></TD>
<TD class=modtr width=7> </TD></TR></TBODY></TABLE>
<DIV class=modbox id=m_blog>
<DIV class=tit>JavaScript 日期控件</DIV>
<DIV class=date>2006-12-05 01:31</DIV>
<TABLE style="TABLE-LAYOUT: fixed">
<TBODY>
<TR>
<TD>
<DIV class=cnt id=blog_text>
<P> <FONT color=#ff0000>//
鉴于这个控件，功能简单，不能适用于FF，我这里为大家增加了一个功能强大的JavaScript日期控件</FONT></P>
<P><FONT color=#ff0000> </FONT><A
href="http://hi.baidu.com/zhang20084/blog/item/913aaa646ae453f4f63654e2.html"
target=_blank><FONT color=#ff0000>JavaScript 日期控件2
jscalendar-1.0</FONT></A><FONT color=#ff0000>
//</FONT> </P>
<P><FONT color=#0000ff size=5>
最</FONT>近做项目的时候，用到日期控件，我就再去找了个，发现这个蛮好的，风格不错，而且很实用，所以使用它了，希望大家也喜欢！</P>
<P>下面是截图：</P>
<P><IMG class=blogimg
src="JavaScript 日期控件_情系计算机 手气不错www_56logo_cn.files/fbf496dd55c1ba355882dd3a.jpg"
border=0 small="0"></P>
<P>艺，图片怎么这么小，不应该啊，不过凑合看了哈。</P>
<P>下面为文件内容：</P>
<P>如果使用的朋友请在同一目录下面新建以下2个文件可以得到效果：</P>
<P><FONT color=#ff0000>date.js</FONT></P>
<P>//// Powered by: amo<BR>//// QQ:48176084<BR>//// Email & MSN
:phoubes@hotmail.com</P>
<P>function PopupCalendar(InstanceName)<BR>{<BR>///Global
Tag<BR>this.instanceName=InstanceName;<BR>///Properties<BR>this.separator="-"<BR>this.oBtnTodayTitle="Today"<BR>this.oBtnCancelTitle="Cancel"<BR>this.weekDaySting=new
Array("S","M","T","W","T","F","S");<BR>this.monthSting=new
Array("January","February","March","April","May","June","July","August","September","October","November","December");<BR>this.Width=200;<BR>this.currDate=new
Date();<BR>this.today=new
Date();<BR>this.startYear=1950;<BR>this.endYear=2010;<BR>///Css<BR>this.divBorderCss="1px
solid
#BCD0DE";<BR>this.tableBorderColor="#CCCCCC"<BR>///Method<BR>this.Init=CalendarInit;<BR>this.Fill=CalendarFill;<BR>this.Refresh=CalendarRefresh;<BR>this.Restore=CalendarRestore;<BR>///HTMLObject<BR>this.oTaget=null;<BR>this.oPreviousCell=null;<BR>this.sDIVID=InstanceName+"oDiv";<BR>this.sTABLEID=InstanceName+"oTable";<BR>this.sMONTHID=InstanceName+"oMonth";<BR>this.sYEARID=InstanceName+"oYear";<BR><BR>}<BR>function
CalendarInit() ///Create panel<BR>{<BR>var
sMonth,sYear<BR>sMonth=this.currDate.getMonth();<BR>sYear=this.currDate.getYear();<BR>htmlAll="<div
id='"+this.sDIVID+"'
style='display:none;position:absolute;width:"+this.Width+";border:"+this.divBorderCss+";padding:2px;background-color:#FFFFFF'>";<BR>htmlAll+="<div
align='center'>";<BR>/// Month<BR>htmloMonth="<select
id='"+this.sMONTHID+"' onchange=CalendarMonthChange("+this.instanceName+")
style='width:50%'>";<BR>for(i=0;i<12;i++)<BR>{ <BR>
htmloMonth+="<option
value='"+i+"'>"+this.monthSting[i]+"</option>";<BR>}<BR>htmloMonth+="</select>";<BR>///
Year<BR>htmloYear="<select id='"+this.sYEARID+"'
onchange=CalendarYearChange("+this.instanceName+")
style='width:50%'>";<BR>for(i=this.startYear;i<=this.endYear;i++)<BR>{<BR>
htmloYear+="<option
value='"+i+"'>"+i+"</option>";<BR>}<BR>htmloYear+="</select></div>";<BR>///
Day<BR>htmloDayTable="<table id='"+this.sTABLEID+"' width='100%'
border=0 cellpadding=0 cellspacing=1
bgcolor='"+this.tableBorderColor+"'>";<BR>htmloDayTable+="<tbody
bgcolor='#ffffff'style='font-size:13px'>";<BR>for(i=0;i<=6;i++)<BR>{<BR>
if(i==0)<BR> htmloDayTable+="<tr
bgcolor='#98B8CD'>";<BR> else<BR>
htmloDayTable+="<tr>";<BR>
for(j=0;j<7;j++)<BR> {</P>
<P> if(i==0)<BR>
{<BR> htmloDayTable+="<td height='20'
align='center' valign='middle'
style='cursor:hand'>";<BR>
htmloDayTable+=this.weekDaySting[j]+"</td>"<BR>
}<BR> else<BR>
{<BR> htmloDayTable+="<td height='20'
align='center' valign='middle'
style='cursor:hand'";<BR> htmloDayTable+="
onmouseover=CalendarCellsMsOver("+this.instanceName+")";<BR>
htmloDayTable+="
onmouseout=CalendarCellsMsOut("+this.instanceName+")";<BR>
htmloDayTable+="
onclick=CalendarCellsClick(this,"+this.instanceName+")>";<BR>
htmloDayTable+="&nbsp;</td>"<BR>
}<BR> }<BR> htmloDayTable+="</tr>";
<BR>}<BR>htmloDayTable+="</tbody></table>";<BR>/// Today
Button<BR>htmloButton="<div align='center'
style='padding:3px'>"<BR>htmloButton+="<button
style='width:40%;border:1px solid
#BCD0DE;background-color:#eeeeee;cursor:hand'"<BR>htmloButton+="
onclick=CalendarTodayClick("+this.instanceName+")>"+this.oBtnTodayTitle+"</button>&nbsp;"<BR>htmloButton+="<button
style='width:40%;border:1px solid
#BCD0DE;background-color:#eeeeee;cursor:hand'"<BR>htmloButton+="
onclick=CalendarCancel("+this.instanceName+")>"+this.oBtnCancelTitle+"</button>
"<BR>htmloButton+="</div>"<BR>///
All<BR>htmlAll=htmlAll+htmloMonth+htmloYear+htmloDayTable+htmloButton+"</div>";<BR>document.write(htmlAll);<BR>this.Fill();
<BR>}<BR>function CalendarFill() ///<BR>{<BR>var
sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,sDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear<BR>sMonth=this.currDate.getMonth();<BR>sYear=this.currDate.getYear();<BR>sWeekDay=(new
Date(sYear,sMonth,1)).getDay();<BR>sToday=this.currDate.getDate();<BR>oTable=document.all[this.sTABLEID];<BR>currRow=oTable.rows[1];<BR>MaxDay=CalendarGetMaxDay(sYear,sMonth);<BR><BR>oSelectMonth=document.all[this.sMONTHID]<BR>oSelectMonth.selectedIndex=sMonth;<BR>oSelectYear=document.all[this.sYEARID]<BR>for(i=0;i<oSelectYear.length;i++)<BR>{<BR>
if(parseInt(oSelectYear.options[i].value)==sYear)oSelectYear.selectedIndex=i;<BR>}<BR>////<BR>for(sDaySn=1,sIndex=sWeekDay;sIndex<=6;sDaySn++,sIndex++)<BR>{</P>
<P> if(sDaySn==sToday)<BR> {<BR>
currRow.cells[sIndex].innerHTML="<font
color=red><i><b>"+sDaySn+"</b></i></font>";<BR>
this.oPreviousCell=currRow.cells[sIndex];<BR>
}<BR> else<BR> {<BR>
currRow.cells[sIndex].innerHTML=sDaySn;<BR>
currRow.cells[sIndex].style.color="#666666"; <BR>
}<BR>
CalendarCellSetCss(0,currRow.cells[sIndex]);<BR>}<BR>for(rowIndex=2;rowIndex<=6;rowIndex++)<BR>{<BR>
if(sDaySn>MaxDay)break;<BR>
currRow=oTable.rows[rowIndex];<BR>
for(cellIndex=0;cellIndex<currRow.cells.length;cellIndex++)<BR>
{<BR> if(sDaySn==sToday)<BR>
{<BR> currRow.cells[cellIndex].innerHTML="<font
color=red><i><b>"+sDaySn+"</b></i></font>";<BR>
this.oPreviousCell=currRow.cells[cellIndex];<BR>
}<BR> else<BR>
{<BR> currRow.cells[cellIndex].innerHTML=sDaySn;
<BR>
currRow.cells[cellIndex].style.color="#666666"; <BR>
}<BR>
CalendarCellSetCss(0,currRow.cells[cellIndex]);<BR>
sDaySn++;<BR> if(sDaySn>MaxDay)break;
<BR> }<BR>}<BR>}<BR>function
CalendarRestore() /// Clear Data<BR>{
<BR>var
oTable<BR>oTable=document.all[this.sTABLEID]<BR>for(i=1;i<oTable.rows.length;i++)<BR>{<BR>
for(j=0;j<oTable.rows[i].cells.length;j++)<BR>
{<BR>
CalendarCellSetCss(0,oTable.rows[i].cells[j]);<BR>
oTable.rows[i].cells[j].innerHTML="&nbsp;";<BR> }<BR>}
<BR>}<BR>function CalendarRefresh(newDate)
///<BR>{<BR>this.currDate=newDate;<BR>this.Restore(); <BR>this.Fill();
<BR>}<BR>function CalendarCellsMsOver(oInstance)
/// Cell MouseOver<BR>{<BR>var
myCell<BR>myCell=event.srcElement;<BR>CalendarCellSetCss(0,oInstance.oPreviousCell);<BR>if(myCell)<BR>{<BR>
CalendarCellSetCss(1,myCell);<BR>
oInstance.oPreviousCell=myCell;<BR>}<BR>}<BR>function
CalendarCellsMsOut(oInstance) ////// Cell
MouseOut<BR>{<BR>var
myCell<BR>myCell=event.srcElement;<BR>CalendarCellSetCss(0,myCell);
<BR>}<BR>function CalendarCellsClick(oCell,oInstance)<BR>{<BR>var
sDay,sMonth,sYear,newDate<BR>sYear=oInstance.currDate.getFullYear();<BR>sMonth=oInstance.currDate.getMonth();<BR>sDay=oInstance.currDate.getDate();<BR>if(oCell.innerText!="
")<BR>{<BR> sDay=parseInt(oCell.innerText);<BR>
if(sDay!=oInstance.currDate.getDate())<BR>
{<BR> newDate=new
Date(sYear,sMonth,sDay);<BR>
oInstance.Refresh(newDate);<BR>
}<BR>}<BR>sDateString=sYear+oInstance.separator+CalendarDblNum(sMonth+1)+oInstance.separator+CalendarDblNum(sDay);
///return
sDateString<BR>if(oInstance.oTaget.tagName=="INPUT")<BR>{<BR>
oInstance.oTaget.value=sDateString;<BR>}<BR>document.all[oInstance.sDIVID].style.display="none"; <BR>}<BR>function
CalendarYearChange(oInstance) /// Year
Change<BR>{<BR>var
sDay,sMonth,sYear,newDate<BR>sDay=oInstance.currDate.getDate();<BR>sMonth=oInstance.currDate.getMonth();<BR>sYear=document.all[oInstance.sYEARID].value<BR>newDate=new
Date(sYear,sMonth,sDay);<BR>oInstance.Refresh(newDate);<BR>}<BR>function
CalendarMonthChange(oInstance) /// Month
Change<BR>{<BR>var
sDay,sMonth,sYear,newDate<BR>sDay=oInstance.currDate.getDate();<BR>sMonth=document.all[oInstance.sMONTHID].value<BR>sYear=oInstance.currDate.getYear();<BR>newDate=new
Date(sYear,sMonth,sDay);<BR>oInstance.Refresh(newDate); <BR>}<BR>function
CalendarTodayClick(oInstance) /// "Today" button
Change<BR>{ <BR>oInstance.Refresh(new
Date()); <BR>}<BR>function
getDateString(oInputSrc,oInstance)<BR>{<BR>if(oInputSrc&&oInstance)
<BR>{<BR>
CalendarDiv=document.all[oInstance.sDIVID];<BR>
oInstance.oTaget=oInputSrc;<BR>
CalendarDiv.style.pixelLeft=(CalendargetPos(oInputSrc,"Left")+135);<BR>
CalendarDiv.style.pixelTop=CalendargetPos(oInputSrc,"Top");<BR>
CalendarDiv.style.display=(CalendarDiv.style.display=="none")?"":"none";<BR>}
<BR>}<BR>function CalendarCellSetCss(sMode,oCell) ///
Set Cell Css<BR>{<BR>// sMode<BR>// 0: OnMouserOut 1: OnMouseOver
<BR>if(sMode)<BR>{<BR> oCell.style.border="1px solid
#5589AA";<BR>
oCell.style.backgroundColor="#BCD0DE";<BR>}<BR>else<BR>{<BR>
oCell.style.border="1px solid #FFFFFF";<BR>
oCell.style.backgroundColor="#FFFFFF";<BR>} <BR>}<BR>function
CalendarGetMaxDay(nowYear,nowMonth) /// Get MaxDay of
current month<BR>{<BR>var
nextMonth,nextYear,currDate,nextDate,theMaxDay<BR>nextMonth=nowMonth+1;<BR>if(nextMonth>11)<BR>{<BR>
nextYear=nowYear+1;<BR> nextMonth=0;<BR>}<BR>else
<BR>{<BR> nextYear=nowYear; <BR>}<BR>currDate=new
Date(nowYear,nowMonth,1);<BR>nextDate=new
Date(nextYear,nextMonth,1);<BR>theMaxDay=(nextDate-currDate)/(24*60*60*1000);<BR>return
theMaxDay;<BR>}<BR>function
CalendargetPos(el,ePro) /// Get Absolute
Position<BR>{<BR>var
ePos=0;<BR>while(el!=null)<BR>{ <BR>
ePos+=el["offset"+ePro];<BR>
el=el.offsetParent;<BR>}<BR>return ePos;<BR>}<BR>function
CalendarDblNum(num)<BR>{<BR>if(num<10) <BR> return
"0"+num;<BR>else<BR> return num;<BR>}<BR>function
CalendarCancel(oInstance)
///Cancel<BR>{<BR>CalendarDiv=document.all[oInstance.sDIVID];<BR>CalendarDiv.style.display="none"; <BR>}</P>
<P></P>
<P><FONT color=#ff0000>test.html</FONT></P>
<P><html><BR><script language=javascript
src="date.js"></script><BR><script><BR>var oCalendarChs=new
PopupCalendar("oCalendarChs");
//初始化控件时,请给出实例名称:oCalendarChs<BR>oCalendarChs.weekDaySting=new
Array("日","一","二","三","四","五","六");<BR>oCalendarChs.monthSting=new
Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");<BR>oCalendarChs.oBtnTodayTitle="今天";<BR>oCalendarChs.oBtnCancelTitle="取消";<BR>oCalendarChs.Init();<BR></script><BR><table><BR><tr><BR><td><BR><input
readonly type="text" name="birthday"
onclick="getDateString(this,oCalendarChs)" value="1987-11-22"
size="15"><BR></td><BR></tr><BR></table><BR></html></P>
<P><FONT color=#ff0000>谢谢你能看</FONT></P></DIV></TD></TR></TBODY></TABLE><BR>
<DIV class=opt><A title=查看该分类中所有文章
href="http://hi.baidu.com/zhang20084/blog/category/³ÌÐò»ýÀÛ">类别：程序积累</A> | <A
title=将此文章添加到百度搜藏 onclick="return addToFavor();"
href="http://cang.baidu.com/do/add" target=_blank>添加到搜藏</A> | 浏览(<SPAN
id=result></SPAN>) | <A
href="http://hi.baidu.com/zhang20084/blog/item/115e9f511030692443a75b3e.html#send">评论</A> (12)
<SCRIPT language=javascript>/*<![CDATA[*/var pre = [true,'神泣，shaiya神泣，shaiya神泣的下载地址,神泣外挂', '神泣，shaiya神泣，shaiya神泣的...','/zhang20084/blog/item/ced84afbcf97f564024f5635.html'];var post = [true,'冻疮，治疗冻疮，有了冻疮怎么办','冻疮，治疗冻疮，有了冻疮怎么办', '/zhang20084/blog/item/53d6203f0fa31dec55e723e1.html'];if(pre[0] || post[0]){ document.write('<div style="height:5px;line-height:5px;"> </div><div id="in_nav">'); if(pre[0]){ document.write('上一篇：<a href="' + pre[3] + '" title="' + pre[1] + '">' + pre[2] + '</a> '); } if(post[0]){ document.write('下一篇：<a href="' + post[3] + '" title="' + post[1] + '">' + post[2] + '</a>'); } document.write('</div>');}/*]]>*/</SCRIPT>
</DIV>
<DIV class=line></DIV>
<STYLE type=text/css>#in_related_doc A {
TEXT-DECORATION: none
}
</STYLE>
<DIV id=in_related_tmp></DIV>
<SCRIPT language=javascript type=text/javascript>/*<![CDATA[*/function HI_MOD_IN_RELATED_DOC_CALLBACK(arg){ if(arg.length <= 1) return false; var hasMore = arg[0]; var D=function(A,B){A[A.length]=B;} if(arg.length % 2 == 0) D(arg, ["","","",""]); var html = ['<div id="in_related_doc"><div class="tit">相关文章：</div>']; D(html, '<table cellpadding="0" cellspacing="3" border="0">'); for(var i = 1, j = arg.length; i < j; i += 2){ D(html, '<tr>'); D(html, '<td width="15px"><a style="font-size:25px" >•</a></td><td><a href="http://hi.baidu.com/' + arg[i][3] + '/blog/item/' + arg[i][2] + '.html" target="_blank" title="' + arg[i][0] + '">' + arg[i][1] + '</a>'); D(html, new Array(10).join('\u3000')); D(html, '</td>'); if(arg[i + 1][0] != "") D(html, '<td width="15px"><a style="font-size:25px" >•</a></td><td><a href="http://hi.baidu.com/' + arg[i + 1][3] + '/blog/item/' + arg[i + 1][2] + '.html" target="_blank" title="' + arg[i + 1][0] + '">' + arg[i + 1][1] + '</a></td>'); else D(html, '<td> </td><td> </td>'); D(html, '</tr>'); } if(hasMore) D(html, '<tr><td colspan="4"><a target="_blank" href="/sys/search?pageno=1&type=7&sort=1&word=JavaScript%20%C8%D5%C6%DA%BF%D8%BC%FE&item=115e9f511030692443a75b3e">更多>></a></td></tr>'); D(html, '</table></div><div class="line"> </div>'); var div = document.getElementById('in_related_tmp'); if(div){ div.innerHTML = html.join(''); while(div.firstChild){ div.parentNode.insertBefore(div.firstChild, div); } div.parentNode.removeChild(div); } window.setTimeout("tracker_init('in_related_doc')",100);}if(RelatedDocData == -1){ // not supported xhr var script = document.createElement('script'); script.type = 'text/javascript'; script.src = '/sys/search?type=8&word=JavaScript%20%C8%D5%C6%DA%BF%D8%BC%FE&item=115e9f511030692443a75b3e&t=' + new Date().getTime(); document.getElementsByTagName('HEAD')[0].appendChild(script);}else if(RelatedDocData == null){ GetAndEval = true;}else{ eval(RelatedDocData);}/*]]>*/</SCRIPT>
<DIV id=in_reader>
<DIV class=tit>最近读者：</DIV>
<SCRIPT> var g_spAnnony=true;var g_read=[ ["rexqing","570d72657871696e670004","rexqing"], ["qingfeng2007","71f56471696e6766656e670a01","dqingfeng"], ["geto","acdb6765746f313038307801","geto1080"], ["suspendseven","efe673757370656e64736576656e9602","suspendseven"], ["%B3%C1%C3%D4%B5%C4wower","0adcb3c1c3d4b5c4574f5745527003","沉迷的WOWER"], ["rovige","2419726f766967655a00","rovige"], ["yangwenlongwo","997379616e6777656e6c6f6e67776fa603","yangwenlongwo"], ["hopedaily","e25e686f70656461696c791700","hopedaily"],{}];g_read.length=g_read.length-1;var _rh1="";var _rh2="";function wrreader(){ _rh1 += '<table width="100%" ><tr>'; _rh2+='<tr>'; if(g_spAnnony){ _rh1+='<td align="center" width="10%" ><img border="0" width="55" height="55" src="http://img.baidu.com/hi/img/portraitn.jpg"></td>'; _rh2+='<td> </td>'; if(g_read.length>0){ _rh1+='<td align="left" width="12%">'; }else{ _rh1+='<td align="left" width="100%">'; } _rh1+="<a href='http://passport.baidu.com/?login&tpl=sp&tpl_reg=sp&u="+myref+"' target='_self'>登录</a>后，您就出现在这里。</td>"; _rh2+='<td> </td>' } if(g_read.length==0){ if(!g_spAnnony){ _rh1+='<td align=left width="100%">最近还没有登录用户看过这篇文章……</td>'; _rh2+='<td> </td>'; } }else{ for(i=0,len=g_read.length;i<len;i++){ _rh1+='<td align="center" valign="bottom" width="10%" class="user"><a href="/'+g_read[i][0]+'" target="_blank"><img border="0" src="http://himg.baidu.com/sys/portraitn/item/'+g_read[i][1]+'.jpg"></a></td>'; _rh2+='<td align="center" valign="top" class="user"><a href="/'+g_read[i][0]+'" target="_blank">'+g_read[i][2]+'</a></td>'; } } _rh1+='<td width="100%"></td></tr>'; _rh2+='<td></td></tr></table>'; document.write(_rh1+_rh2);}wrreader();</SCRIPT>
</DIV>
<DIV class=line></DIV>
<SCRIPT language=JavaScript>allkey=allkey+"a919c2fd96d49345d7887dca_115e9f511030692443a75b3e_";</SCRIPT>
<DIV id=in_comment><A name=comment></A>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -