JS 日期控件
来源:互联网 发布:战龙三国玉佩进阶数据 编辑:程序博客网 时间:2024/05/08 11:54
http://download1.csdn.net/down3/20070528/28173432642.rar
==
calendar.html
-------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN" "http://www.w3.org/tr /xhtml1/DTD/xhtml1-tr ansitional.dtd" >
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus" />
<meta http-equiv="expires" content="no-cache" />
<style type="text/css">
body,td{font-size:9pt; margin:1px; font-family:georgia; font-weight:bold;}
.title{font-weight:bold; color:green;}
a{color:blue; text-decoration:none;}
a:hover{color:red; font-size:12pt;}
a.linkHead{color:#2960B1; text-decoration:none; font-size:9pt;}
a.linkHead:hover{color:red; font-weight:normal; font-size:9pt;}
#calBg{position:absolute; top:2px; left:0px; z-index:-1; font-size:33px; font-family:varanda; font-weight:bold; filter:alpha(opacity=30) glow(color=#FCEFDC,strength=7); color:orange; background-color:#EEEEEE; width:204px; height:154px; vertical-align:middle; padding-top:80px; padding-left:10px;}
table,td{background:none};
#calendarTab{border:1px solid #EEEEEE; margin:1px;}
.tb{border-bottom:1px solid #EEEEEE;}
.trb{border-bottom:1px solid #EEEEEE; border-right:1px solid #EEEEEE;}
.tr{border-right:1px solid #EEEEEE;}
.titleHead{background-color:#BCD2EE; font-weight:normal;}
a#close{color:#2960B1; font-size:13px; font-weight:bold;}
a#close:hover{color:red; font-size:13px; font-weight:bold;}
</style>
<script language="javascript" type="text/javascript" src="calendar.js"></script>
<script language="javascript" type="text/javascript" src="calendar_done.js"></script>
</HEAD>
<BODY onload="init();" onContextMenu="return false" onselectstart="return false">
<table border="0" cellpadding="0" cellspacing="1" id="calendarTab" name="calendarTab" bgcolor="#EEEEEE">
<tr>
<td height="30" colspan="7" align="center" valign="middle" class="tb titleHead">
<span style="font-family:webdings; font-size:15px;"><a href="javascript:moveYear(-1)" class="linkHead">7</a><a href="javascript:moveMonth(-1)" class="linkHead">3</a></span>
<select id="year" name="year" onchange="_getDate()">
</select>
<select id="month" name="month" onchange="_getDate()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<span style="font-family:webdings; font-size:15px;"><a href="javascript:moveMonth(1)" class="linkHead">4</a><a href="javascript:moveYear(1)" class="linkHead">8</a></span> </td>
</tr>
<tr bgcolor="#FFFFFF" >
<td width="30px" height="25px" align="center" class="title trb"><font color="red">日</font></td>
<td width="30px" height="25px" align="center" class="title trb">一</td>
<td width="30px" height="25px" align="center" class="title trb">二</td>
<td width="30px" height="25px" align="center" class="title trb">三</td>
<td width="30px" height="25px" align="center" class="title trb">四</td>
<td width="30px" height="25px" align="center" class="title trb">五</td>
<td width="30px" height="25px" align="center" class="title tb"><font color="red">六</font></td>
</tr>
<tr bgcolor="#FFFFFF" >
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="tb"> </td>
</tr>
<tr bgcolor="#FFFFFF" >
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="tb"> </td>
</tr>
<tr bgcolor="#FFFFFF" >
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="tb"> </td>
</tr>
<tr bgcolor="#FFFFFF" >
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="tb"> </td>
</tr>
<tr bgcolor="#FFFFFF" >
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="tb"> </td>
</tr>
<tr bgcolor="#FFFFFF" >
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="trb"> </td>
<td width="30px" height="25px" align="center" class="tb"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="25px" align="center" colspan="7" class="titleHead">
<a href="javascript:void(0)" id="close" onclick="parent.document.getElementById('caDiv').style.display='none';"><span style="font-family:webdings; font-size:16px">r</span> 关闭</a></td>
</tr>
</table>
<div id="calBg" ></div>
</BODY>
</HTML>
==========
calendar.js
------------------
/*----------------------------------------*/
| |
| author:hanpoyangtitan |
| create:2007-5-25 |
| |
/*----------------------------------------*/
function CalendarPicker(beginYear,endYear)
{
this.tab=null; //表格对象
this.curYYYY=0; //年
this.curMM=0;
this.curDD=0;
this.curWeekDay=0;
this._selYYYY=null;
this.container_=null;
this.beginYear=beginYear;;
this.endYear=endYear;
}
CalendarPicker.prototype.loadTab=function()
{
this.tab=document.getElementById("calendarTab");
}
CalendarPicker.prototype.loadDate=function(YYYY,MM)
{
this.clearTab();
var now=new Date();
var newDate=null;
if(YYYY==null || YYYY==0 || YYYY=="")
{
this.curYYYY=now.getYear();
}
else
{
this.curYYYY=YYYY;
}
if(MM==null || MM<0)
{
this.curMM=now.getMonth();
}
else
{
this.curMM=MM;
}
var daysNumber=this.getMonthDays(this.curYYYY,this.curMM+1);
var firstDay=new Date(this.curYYYY,this.curMM,1);
var firstWeekDay=firstDay.getDay();
var lastDay=new Date(this.curYYYY,this.curMM,daysNumber);
var lastWeekDay=lastDay.getDay();
var dd=0;
for(var i=0;i<this._selYYYY.options.length;i++)
{
if(this._selYYYY.options[i].value==this.curYYYY)this._selYYYY.selectedIndex=i;
}
for(var i=0;i<this._selMM.options.length;i++)
{
if(this._selMM.options[i].value==this.curMM+1)this._selMM.selectedIndex=i;
}
for(var r=2;r<8;r++)
{
if(r==2)
{
for(L=1;L<=7-firstWeekDay;L++)
{
dd++;
var newDate=new Date(this.curYYYY,this.curMM,dd);
var newWeekDay=newDate.getDay();
var newDay=newDate.getDate();
if(now.getYear()==newDate.getYear() && now.getMonth==newDate.getMonth() && now.getDate()==newDate.getDate())
this.setValue(r,newWeekDay,dd,"orange","#ABABAB");
else if(newDate.getDay()==6 || newDate.getDay()==0)
this.setValue(r,newWeekDay,dd,"red","#FFFFFF");
else
this.setValue(r,newWeekDay,dd,"","#FFFFFF");
}
}
else
{
for(L=0;L<7;L++)
{
dd++;
if(dd>daysNumber)return;
var newDate=new Date(this.curYYYY,this.curMM,dd);
var newWeekDay=newDate.getDay();
var newDay=newDate.getDate();
if(now.getYear()==newDate.getYear() && now.getMonth()==newDate.getMonth() && now.getDate()==newDate.getDate())
this.setValue(r,newWeekDay,dd,"orange","#ABABAB");
else if(newDate.getDay()==6 || newDate.getDay()==0)
this.setValue(r,newWeekDay,dd,"red","#FFFFFF");
else
this.setValue(r,newWeekDay,dd,"","#FFFFFF");
}
}
}
}
CalendarPicker.prototype.clearTab=function()
{
for(var i=2;i<8;i++)
{
for(var j=0;j<7;j++)
{
this.tab.rows[i].cells[j].innerHTML=" ";
this.tab.rows[i].cells[j].style.bgcolor="#FFFFFF";
}
}
}
CalendarPicker.prototype.getMonthDays=function(yyyy,mm)
{
if(yyyy%4==0 && mm==2)
{
return 29;
}
else if(yyyy%4!=0 && mm==2)
{
return 28;
}
switch(mm)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
return 31;
break;
default:return 30;
}
}
CalendarPicker.prototype.setValue=function(x,y,v,f,c)
{
if(c.length>0)
{
this.tab.rows[x].cells[y].bgColor=c;
}
if(f.length>0)
{
this.tab.rows[x].cells[y].style.color="#FF0000";
this.tab.rows[x].cells[y].innerHTML="<a href=/"javascript:void(0)/" onclick=/"setDate('"+v+"')/" style=/"color:"+f+"/" >"+v+"</a>";
return;
}
this.tab.rows[x].cells[y].innerHTML="<a href=/"javascript:void(0)/" onclick=/"setDate('"+v+"')/" >"+v+"</a>";
}
CalendarPicker.prototype.init=function()
{
this._selYYYY=document.getElementById("year");;
this._selMM=document.getElementById("month");
this.initialYearSelect(this.beginYear,this.endYear);
this.loadTab();
this.loadDate();
var id=window.location.search.substring(1);
this.container_=parent.document.getElementById(id);
}
CalendarPicker.prototype._getDate=function()
{
var year=this._selYYYY.options[this._selYYYY.selectedIndex].value;
var month=this._selMM.options[this._selMM.selectedIndex].value;
this.loadDate(year,--month);
}
CalendarPicker.prototype.moveYear=function(p)
{
this.curYYYY=parseInt(this.curYYYY)+parseInt(p);
this.loadDate(this.curYYYY,this.curMM);
}
CalendarPicker.prototype.moveMonth=function(p)
{
this.curMM+=p;
if(this.curMM<0)
{
this.curMM=11; //December
this.curYYYY--;
}
else if(this.curMM>11)
{
this.curMM=0;
this.curYYYY++;
}
this.loadDate(this.curYYYY,this.curMM);
}
CalendarPicker.prototype.setDate=function(txt)
{
var dateString=this.curYYYY+"-"+(this.curMM+1)+"-"+txt;
this.container_.value=dateString;
parent.document.getElementById("caIframe").parentNode.style.display="none";
}
CalendarPicker.prototype.initialYearSelect=function(b,e)
{
this._selYYYY.options.length=0;
for(i=0;i<(e-b);i++)
{
this._selYYYY.options[i]=new Option(i+b,i+b);
}
}
function debug(str)
{
parent.document.body.insertAdjacentHTML("BeforeEnd",str+"<br>")
}
======================
calendar_done.js
----------------------
<!--
// author:hanpoyangtitan
// create:2007-5-25
// team:Tom Studio
var bgDiv=null;
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0;
a[i].parentNode.style.height = a[i].offsetHeight +"px";
a[i].style.height = "10px";
if(document.documentElement&&document.documentElement.scrollHeight)
{
h1=document.documentElement.scrollHeight;
}
if(document.body) h2=document.body.scrollHeight;
var h=Math.max(h1, h2);
//if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = a[i].parentNode.style.height = h +"px";
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
//window.attachEvent("onresize", iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener('load', iframeAutoFit, false);
//window.addEventListener('resize', iframeAutoFit, false);
}
function autoWidth()
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
a[i].style.width = a[i].parentNode.style.width = 214 +"px";
}
}
}
}
var calendar=null;
function init()
{
calendar=new CalendarPicker(1900,2080);
calendar.init();
iframeAutoFit();
autoWidth();
bgDiv=document.getElementById("calBg");
var pos=parent.getoffset(bgDiv);
bgDiv.style.left="0px";
bgDiv.style.top="0px";
bgDiv.innerHTML="<div align=/"center/">汤 姆</div>"+calendar.curYYYY+"年"+(calendar.curMM+1)+"月";
}
function moveYear(year)
{
calendar.moveYear(year);
bgDiv.innerHTML="<div align=/"center/">汤 姆</div>"+calendar.curYYYY+"年"+(calendar.curMM+1)+"月";
}
function moveMonth(m)
{
calendar.moveMonth(m);
bgDiv.innerHTML="<div align=/"center/">汤 姆</div>"+calendar.curYYYY+"年"+(calendar.curMM+1)+"月";
}
function setDate(v)
{
calendar.setDate(v);
}
function _getDate()
{
calendar._getDate();
bgDiv.innerHTML="<div align=/"center/">汤 姆</div>"+calendar.curYYYY+"年"+(calendar.curMM+1)+"月";
}
//-->
=======================
_calendar.js
--------------------------
document.write("<div id=/"caDiv/" style=/"width:20px;height:20px; position:absolute; top:0px; left:0px; border:1px solid #EFEFEF; /">-</div>");
var caiframe=document.createElement("<iframe id=/"caIframe/" frameborder=/"0/" src=/"about:blank/"></iframe>");
var caDiv=document.getElementById("caDiv");
caDiv.innerHTML="";
caDiv.appendChild(caiframe);
caDiv.style.display="none";
function calendar(id,posid)
{
var container=document.getElementById(posid);
caDiv.style.display="block";
caiframe.src="calendar/calendar.html?"+id;
var pos=getoffset(container)
caDiv.style.top=pos[0]+container.offsetHeight;
caDiv.style.left=pos[1];
}
function getoffset(e)
{
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
var rec = new Array(1);
rec[0] = t;
rec[1] = l;
return rec
}
======================
Demo.html
-------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="calendar/_calendar.js"></script>
</HEAD>
<BODY>
<input type="text" id="ca" name="ca" /><a href="javascript:void(0)" onclick="calendar('ca','obj_1')"><img src="calendar/calendar.gif" border="0" align="absmiddle" id="obj_1"></a>
<br />
<select >
<option value="sdfaf">dsfjkadsfj</option>
</select>
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
sadfasdf<br />
<input type="text" id="cb" name="ca" /><a href="javascript:void(0)" onclick="calendar('cb')">日期</a
</BODY>
</HTML>
- JS控件:日期、时间
- js的日期控件
- JS弹出日期控件.
- js日期控件
- js日期控件
- JS 日期控件
- JS日期控件
- JS经典日期控件
- js 日期控件
- 关于js日期控件
- js日期控件 3
- js日期控件 2
- js日期控件 1
- js日期控件
- js日期控件
- js 日期控件
- js日期控件
- Js日期控件
- 同济大学软件学院万院长谈泽业
- 禁止ctrl+n和 禁止ctrl+r和 禁止shift+f10 禁止鼠标右键or左右键 和禁止f5 的JS代码
- C#中的反射
- 两河流域(board game-my love)
- 小试 httperf
- JS 日期控件
- 先添加个信息
- 如何理解C#中的反射机制
- 三级报名成功
- 微软VC6_SDK的bug
- GDAL之OGR入门(转自 马口铁皮兄的blog)
- 基于UML和ASP.NET实现三层B/S结构系统开发
- 在安装了Windows SharePoint Services的机器上,安装自己的Web应用
- 两兄弟爬楼梯的故事(转载)