ASP.NET 好看适用的日历控件
时间:2010-09-07 来源:海滨小城
ASP.NET 好看适用的日历控件 收藏
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="baoming_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<IFRAME id="CalFrame" name="CalFrame" style="DISPLAY: none;Z-INDEX: 100; LEFT: 713px; POSITION: absolute; TOP: 289px" src="../jss/Cal.htm" frameBorder="0" width="144" height="192"></IFRAME>
<body>
<form id="form1" runat="server">
<table border="0">
<tr>
<td>
出生日期</td>
<td style="width: 203px"><input id="txt_born" runat="server" style="width:135px" readonly="readonly" onclick="event.cancelBubble=true;showCalendar('txt_born',true,'txt_born');"/></td>
</tr>
</table></form>
</body>
</html>
<SCRIPT language="javascript" src="../jss/others1.js" type="text/javascript"></SCRIPT>
下面需要引入脚本和框架
1.Cal.htm
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE type="text/css">TD { FONT-SIZE: 12px; FONT-FAMILY: arial; TEXT-ALIGN: center }
TD.dt { FONT-SIZE: 11px; FONT-FAMILY: arial; TEXT-ALIGN: center }
A { COLOR: #666666 }
A:hover { COLOR: red }
A.bt { COLOR: blue }
</STYLE>
<SCRIPT language="javascript">
<!--//
var str='',i,j,yy,mm,openbound,callback,oleDateTime;
var fld1,fld2;
var wp=window.parent;
var cf=wp.document.getElementById("CalFrame");
var fld,curday,today=new Date();
today.setHours(0);today.setMinutes(0);today.setSeconds(0);today.setMilliseconds(0);
//var lastyear=today.getYear(),lastmonth=today.getMonth();
function parseDate(s)
{
var reg=new RegExp("[^0-9-]","")
if(s.search(reg)>=0)return today;
var ss=s.split("-");
if(ss.length!=3)return today;
if(isNaN(ss[0])||isNaN(ss[1])||isNaN(ss[2]))return today;
return new Date(parseInt(ss[0]),parseInt(ss[1]*1)-1,parseInt(ss[2]*1));
}
function resizeCalendar(){cf.width=144;cf.height=192;}
function initCalendar()
{
oleDateTime = fld1.value;
if(fld1&&fld1.value.length>0){curday=parseDate(fld1.value);}
else if(fld2&&fld2.value.length>0){curday=parseDate(fld2.value);}
else curday=today;
drawCalendar(curday.getFullYear(),curday.getMonth());
}
function drawCalendar(y,m)
{
var x=new Date(y,m,1),mv=x.getDay(),d=x.getDate(),de;
yy=x.getFullYear();mm=x.getMonth();
document.getElementById("yyyymm").innerHTML=yy+"."+(mm+1>9?mm+1:"0"+(mm+1));
for(var i=1;i<=mv;i++)
{
de=document.getElementById("d"+i);
de.innerHTML="";
de.bgColor="";
}
while(x.getMonth()==mm)
{
de=document.getElementById("d"+(d+mv));
if(x.getTime()==curday.getTime())
de.bgColor="#dddddd";
else
de.bgColor="white";
if(x.getTime()==today.getTime())
de.innerHTML="<a href=javascript:setDate("+d+");><font color=red>"+d+"</font></a>";
else if(x.getTime()<today.getTime())
if(openbound){de.innerHTML="<a href=javascript:setDate("+d+"); class=bt>"+d+"</a>";}
else{de.innerHTML="<font color=#888888>"+d+"</font>";}
else
de.innerHTML="<a href=javascript:setDate("+d+");>"+d+"</a>";
x.setDate(++d);
}
while(d+mv<=42)
{
de=document.getElementById("d"+(d+mv));
de.innerHTML="";
de.bgColor="";
d++;
}
}
function setDate(d)
{
var dstr=yy+"-"+appendZero((mm+1))+"-"+appendZero(d);
if(callback&&callback.length>0){eval("wp."+callback+"(\""+dstr+"\")");}
else
{
//fld1.value=dstr;
var len=oleDateTime.indexOf(" ");
if(len<0)
fld1.value = dstr;
else
fld1.value = dstr+oleDateTime.substr(len,fld1.value.length)
}
wp.hideCalendar();
}
function setToDay(){
var sToDay = new Date()
sy = sToDay.getFullYear()
sm = parseInt(sToDay.getMonth(),10) + 1
sd = sToDay.getDate()
//if (!fld1){parent.document.getElementById().value=sy +"-"+ appendZero(sm) +"-" + appendZero(sd)}
//else{fld1.value = sy +"-"+ appendZero(sm) +"-" + appendZero(sd)}
//-------- 2009-1-5 修改,把时分秒加在后面 如果出现 “ ”的话?
var len=oleDateTime.indexOf(" ");
if(len<0)
fld1.value = sy +"-"+ appendZero(sm) +"-" + appendZero(sd)
else
fld1.value = sy +"-"+ appendZero(sm) +"-" + appendZero(sd) +oleDateTime.substr(len,fld1.value.length)
wp.hideCalendar();
}
function appendZero(s){
if (s.toString().length == 1){
return "0"+s
}
else{
return s
}
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.3790.118" name="GENERATOR">
</HEAD>
<BODY bottomMargin="0" bgColor="red" leftMargin="0" topMargin="0" onload="resizeCalendar();"
rightMargin="0">
<TABLE id="tbl0" cellSpacing="0" cellPadding="1" bgColor="#336699" border="0">
<TBODY>
<TR>
<TD>
<TABLE cellSpacing="1" cellPadding="2" width="100%" bgColor="white" border="0">
<TBODY>
<TR bgColor="gray">
<TD id="Yprev" width="16" bgColor="#999999"><A href="javascript:drawCalendar(yy-1,mm);" title="减少(年)"><!--IMG border=0 height=16
src="calendar.files/prev.gif" width=16--><FONT color="#ffffff"><<</FONT></A> </TD>
<TD id="Ynext" width="16" bgColor="#999999"><A href="javascript:drawCalendar(yy+1,mm);" title="增加(年)"><!--IMG border=0 height=16
src="calendar.files/next.gif" width=16-->
<FONT color="#ffffff">>></FONT> </A>
</TD>
<TD id="yyyymm" bgColor="#999999"><FONT face="宋体"></FONT></TD>
<TD id="prev" width="16" bgColor="#999999"><A href="javascript:drawCalendar(yy,mm-1);" title="减少(月)"><!--IMG border=0 height=16
src="calendar.files/prev.gif" width=16--><FONT color="#ffffff"><<</FONT></A> </TD>
<TD id="next" width="16" bgColor="#999999"><A href="javascript:drawCalendar(yy,mm+1);" title="增加(月)"><!--IMG border=0 height=16
src="calendar.files/next.gif" width=16-->
<FONT color="#ffffff">>></FONT> </A>
</TD>
</TR>
</TBODY></TABLE>
<TABLE cellSpacing="2" cellPadding="0" width="142" bgColor="#f7f7f7" border="0">
<TBODY>
<TR height="18">
<TD width="18"><FONT color="red">日</FONT></TD>
<TD width="18"><FONT color="green">一</FONT></TD>
<TD width="18"><FONT color="green">二</FONT></TD>
<TD width="18"><FONT color="green">三</FONT></TD>
<TD width="18"><FONT color="green">四</FONT></TD>
<TD width="18"><FONT color="green">五</FONT></TD>
<TD width="18"><FONT color="green">六</FONT></TD>
</TR>
<TR height="1">
<TD bgColor="gray" colSpan="7"></TD>
</TR> <!-- add new row by gm-->
<TR>
<TD colSpan="7">
<TABLE cellSpacing="0" cellPadding="0" width="100%" bgColor="#ffffff" border="0">
<TBODY>
<TR>
<TD height="11"></TD>
</TR>
<SCRIPT language="javascript">
<!--//
for(i=0;i<6;i++)
{
str+="<tr height=18>";
for(j=1;j<=7;j++)str+="<td id=d"+(i*7+j)+" class=dt></td>";
str+="</tr>";
}
document.write(str);
//-->
</SCRIPT>
</TBODY></TABLE>
</TD>
</TR> <!-- add new row by gm-->
<TR height="1">
<TD bgColor="#cccccc" colSpan="7"></TD>
</TR>
<TR height="18">
<TD colSpan="7"><A href="javascript:setToDay()">今天</A> <A href="javascript:wp.hideCalendar();">关闭</FONT></A></TD>
</TR>
</TBODY></TABLE>
</TD>
</TR>
</TBODY></TABLE>
<SCRIPT language="javascript">
<!--//
var bCalLoaded=true;
//-->
</SCRIPT>
</BODY>
</HTML>
2.引入脚本:others1.js
function showCalendar(sImg,bOpenBound,sFld1,sFld2,sCallback)
{
var fld1,fld2;
var cf=document.getElementById("CalFrame");
var wcf=window.frames.CalFrame;
var oImg=document.getElementById(sImg);
if(!oImg){alert("控制对象不存在!");return;}
if(!sFld1){alert("输入控件未指定!");return;}
fld1=document.getElementById(sFld1);
if(!fld1){alert("输入控件不存在!");return;}
if(fld1.tagName!="INPUT"||fld1.type!="text"){alert("输入控件类型错误!");return;}
if(sFld2)
{
fld2=document.getElementById(sFld2);
if(!fld2){alert("参考控件不存在!");return;}
if(fld2.tagName!="INPUT"||fld2.type!="text"){alert("参考控件类型错误!");return;}
}
if(!wcf.bCalLoaded){alert("日历未成功装载!请刷新页面!");return;}
if(cf.style.display=="block"){cf.style.display="none";return;}
var eT=0,eL=0,p=oImg;
var sT=document.body.scrollTop,sL=document.body.scrollLeft;
var eH=oImg.height+25,eW=oImg.width;
while(p&&p.tagName!="BODY"){eT+=p.offsetTop;eL+=p.offsetLeft;p=p.offsetParent;}
cf.style.top=(document.body.clientHeight-(eT-sT)-eH>=cf.height)?eT+eH:eT-cf.height+200;
cf.style.left=(document.body.clientWidth-(eL-sL)>=cf.width)?eL:eL+eW-cf.width;
cf.style.display="block";
wcf.openbound=bOpenBound;
wcf.fld1=fld1;
wcf.fld2=fld2;
wcf.callback=sCallback;
wcf.initCalendar();
fld = fld1
}
function hideCalendar()
{
var cf=document.getElementById("CalFrame");
cf.style.display="none";
}
function ShowHide(Id,HideText,ShowText){
RowId="R"+Id;
TxtId="T"+Id;
if (document.all[RowId].style.display=="none")
{
document.all[RowId].style.display="";
document.all[TxtId].innerText=HideText;
}
else
{
document.all[RowId].style.display="none";
document.all[TxtId].innerText=ShowText;
}
}
String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
function td_clock(fieldname)
{
td_clock2("../",fieldname);
//myleft=document.body.scrollLeft+event.clientX-event.offsetX-80;
//mytop=document.body.scrollTop+event.clientY-event.offsetY+140;
//window.showModalDialog("../jss/sele_Time.aspx?elementID="+fieldname,self,"edge:raised;scroll:0;status:0;help:0;resizable:1;dialogWidth:280px;dialogHeight:120px;dialogTop:"+mytop+"px;dialogLeft:"+myleft+"px");
}
function td_clock2(isPath,fieldname)
{
myleft=document.body.scrollLeft+event.clientX-event.offsetX-80;
mytop=document.body.scrollTop+event.clientY-event.offsetY+140;
window.showModalDialog((isPath+"jss/sele_Time.aspx?elementID="+fieldname),self,"edge:raised;scroll:0;status:0;help:0;resizable:1;dialogWidth:280px;dialogHeight:120px;dialogTop:"+mytop+"px;dialogLeft:"+myleft+"px");
}
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/chenjianyong94/archive/2009/07/08/4331930.aspx