JavaScript日历控件！JS兼容IE6.7.FF.可挡住下拉控件
原文发布时间为：2009-08-22 —— 来源于本人的百度文章 [由搬家工具导入]
<!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>
<script type="text/javascript" src="Calendar.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txtDate" onclick="return Calendar('txtDate');"/>
</div>
</form>
</body>
</html>
============Calendar.js===============================
// 日历控件js 使用方法: 事件="return Calendar('要赋日期的id')";
// 如onclick="return Calendar('TextBox1')"
// 日期格式为2009-8-8,而不是2009-08-08
var MonthDNum=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
var MonthText=new Array("","一月","二月","三月","四月","五月","六月","七月","八月","九月","
十月","十一月","十二月");
var Calendar_obj,Calendar_obj2;
document.write('<iframe style="position:absolute;width:206px;display:none;"
name="divCalendar" id="divCalendar" frameborder="0" scrolling="no"></iframe>');
/*头部信息CSS及JS函数*/
var HeadMsg='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"+
'<html xmlns="+
'<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style
type="text/css"><!--'+
'body,html{margin:0px;height:100%;background:#FFF;}a,li,input {font-
family:"Verdana","Arial";font-size:12px;}'+
'a {height:18px;color:#000;padding-top:2px;text-decoration:none;display:block;}'+
'a:hover{height:17px;padding-top:1px;border:1px solid #000;background:#FFF;}'+
'.CurrentDate {height:17px;padding-top:1px;border:1px solid #000;background: #FFF;}'+
'ul{list-style:none;margin:0px;padding:0px;overflow:hidden;}'+
'ul li{float:left;margin-left:1px;padding-top:1px;display:inline;text-
align:center;width:28px;height:20px;}'+
'#Tools {width:204px;background:#5563B0;padding:0px;}'+
'#Tools li{padding-bottom:1px;}'+
'#Tools a{color:#FFF;}'+
'#Tools a:hover{border:1px solid #2E3665;background:#979FCE;}'+
'#Title {width:204px;background:#CAD3E8;border-bottom:1px solid #000;}'+
'#Title li{height:16px;padding-top:2px;}'+
'#sYear,#sMonth {width:44px;height:16px;border:1px solid #88A9C9;border-right:0;padding-
top:2px;}'+
'#SArr {width:19px;height:18px;background:#E2EBF4;font-size:10px;text-
align:center;color:#5563B0;border:1px solid #88A9C9;border-left:0;margin-
right:3px;cursor:pointer;}'+
'#Select {width:63px;border:1px solid #8AC;background:#FFF;height:146px;}'+
'#Select a{height:16px;padding-left:3px;}'+
'#Select a:hover{color:#000;background:#E2EBF4;padding-top:2px;border:0;}'+
'#Select #SelectBn {background:#C7CDEF;font-size:8px;line-height:7px;height:7px;text-
align:center;color:#5563B0;}'+
'#Select #SelectBn:hover{background:#7682C1;color:#FFF;}#SArr,#sYear,#sMonth{float:left;}'+
'#SelectYear,#SelectMonth{position:absolute;top:21px;z-
index:1;overflow:hidden;display:none;}'+
'--></style><scr'+
'ipt language="JavaScript">var
mdown,sy,ey,sm,em,HideSelect=1,CurrentSelect,year,month,day;function Scroll(str,key)'+
'{var Html="",s,e,obj,d;'+
'if(key=="Y"){s=sy;e=ey;obj="SelectYearItem";d="年";}if(key=="M")
{s=sm;e=em;obj="SelectMonthItem";d="";}'+
'if(str=="Up"){s--;e--;}if(str=="Next"){s++;e++;}'+
'if(key=="Y"){sy=s;ey=e;}if(key=="M"){if(s<1)s=1;if(s>6)s=6;if(e<7)e=7;if(e>12)
e=12;sm=s;em=e;}'+
'for(i=s;i<=e;i++){Html+=\'<a href="javascript:;" onclick="parent.Calendar_Modif(\';Html+=
(key=="M")?year+\',\'+i+\',\'+day+\');">\'+parent.MonthText
[i]:i+\',\'+month+\',\'+day+\');">\'+i;Html+=d+"</a>";}'+
'document.getElementById(obj).innerHTML=Html;}'+
'function KeyDown(str){if(str==38){Scroll("Up",CurrentSelect);}if(str==40){Scroll
("Next",CurrentSelect);}}'+
'function ShowSelect(str,str2){HideSelect=0;HSelect();Scroll
(\'\',str2);document.getElementById(str).style.display="block";CurrentSelect=str2}'+
'function HSelect(){document.getElementById
("SelectYear").style.display="none";document.getElementById
("SelectMonth").style.display="none";}'+
'function Calendar_GetDate(y,m,d)'+
'{var objEvent=window.event||arguments.callee.caller.arguments[0];'+
'var srcElement=objEvent.srcElement;'+
'if(!srcElement){srcElement=objEvent.target;}'+
'if(srcElement.tagName=="A"){parent.Calendar_GetDate(y,m,srcElement.innerHTML);}}'+
'document.onclick=function(){if(HideSelect){HSelect();}HideSelect=1;}</scr'+
'ipt><body onkeydown="KeyDown(event.keyCode);">'+
'<div id="SelectYear" style="left:31px;" onclick="ShowSelect(\'SelectYear\',\'Y\');"><div
id="Select"><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll
(\\\'Up\\\',\\\'Y\\\')\',50);" onmouseup="window.clearInterval(mdown);"
onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-bottom:1px solid
#5563B0;"><font face="Webdings">5</font></a><div id="SelectYearItem">'+
'</div><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll
(\\\'Next\\\',\\\'Y\\\')\',50);" onmouseup="window.clearInterval(mdown);"
onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-top:1px solid
#5563B0;"><font face="Webdings">6</font></a></div></div>'+
'<div id="SelectMonth" style="left:99px;" onclick="ShowSelect(\'SelectMonth\',\'M\');"><div
id="Select"><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll
(\\\'Up\\\',\\\'M\\\')\',50);" onmouseup="window.clearInterval(mdown);"
onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-bottom:1px solid
#5563B0;"><font face="Webdings">5</font></a><div id="SelectMonthItem">'+
'</div><a href="javascript:;" onmousedown="mdown=window.setInterval(\'Scroll
(\\\'Next\\\',\\\'M\\\')\',50);" onmouseup="window.clearInterval(mdown);"
onmouseout="window.clearInterval(mdown);" id="SelectBn" style="border-top:1px solid
#5563B0;"><font face="Webdings">6</font></a></div></div>';
function Calendar_Show(year,month,day)
{
var content;
var date=new Date();
var DayNum=(IsLeapYear(year) && month==2)?MonthDNum[month]+1:MonthDNum[month];
var date2=new Date(year,month-1,1)
var start=date2.getDay();
var date2=null;
var Trn=Math.ceil((DayNum+start)/7);
var PrNum=1;
content='<scr'+
'ipt language="JavaScript">year='+year+',month='+month+',day='+day+',sy=year-3;ey=year+3;'+
'sm=(month-3<1)?1:(+month-3>6)?6:month-3;'+
'em=(month+3<7)?7:(month+3>12)?12:month+3;</scr'+
'ipt><div style="border:1px solid #6A84C8;height:'+(64+21*Trn)+'px;"><ul><li
style="background:#FFF;"></li>'+
'<li style="width:144px;background:#FFF;padding-bottom:1px;" id="SelectArea"><div
id="sYear" onclick="ShowSelect(\'SelectYear\',\'Y\');">'+year+'年</div><div id="SArr"
onclick="ShowSelect(\'SelectYear\',\'Y\');"><font face="Webdings">6</font></div>'+
'<div id="sMonth" onclick="ShowSelect(\'SelectMonth\',\'M\');">'+MonthText[month]
+'</div><div id="SArr" onclick="ShowSelect(\'SelectMonth\',\'M\');"><font
face="Webdings">6</font></div>';
content+='</li>'+
'<li><a href="javascript:parent.Calendar_hide();">×</a></li></ul>'+
'<div id="Tools"><ul>'+
'<li><a href="javascript:parent.Calendar_Modif('+(year-1)
+','+month+','+day+');">«</a></li>'+
'<li><a href="javascript:parent.Calendar_Modif('+year+','+(month-1)
+','+day+')";>‹</a></li>';
if(Calendar_obj2){content+='<li style="width:42px;"><a
href="javascript:parent.Calendar_GetDate('+year+','+month+',0);">本月</a></li>'+
'<li style="width:43px;"><a href="javascript:parent.Calendar_GetDate('+date.getFullYear()
+','+(date.getMonth()+1)+','+date.getDate()+');">今天</a></li>';}
else{content+='<li style="width:86px;"><a href="javascript:parent.Calendar_GetDate
('+date.getFullYear()+','+(date.getMonth()+1)+','+date.getDate()+');">选择今天</a></li>';}
content+='<li><a href="javascript:parent.Calendar_Modif('+year+','+(month+1)
+','+day+');">›</a></li>'+
'<li><a href="javascript:parent.Calendar_Modif('+(year+1)
+','+month+','+day+');">»</a></li>'+
'</ul></div>'+
'<div id="Title"><ul><li style="color:#F00;">日</li><li>一</li><li>二</li><li>三</li><li>四
</li><li>五</li><li style="color:#F00;">六</li></ul></div>'+
'<ul onClick="javascript:Calendar_GetDate('+year+','+month+',-1);">';
var date=null;
if(start>0){content+='<li style="width:'+(start*29-1)+'px;"></li>';}
for(i=1;i<=DayNum;i++)
{
content+='<li><a href="#"'
content+=(day==PrNum)?' class="CurrentDate"':'';
content+=((i+start)%7<2)?' style="color:#F00;"':'';
content+='>'+PrNum+'</a></li>';
PrNum++;
}
content+='</ul></div>';
//层定位
var Calendar=document.getElementById('divCalendar');
Calendar.style.height=66+21*Trn+'px'; //框架高度
divCalendar.document.open()
divCalendar.document.write(HeadMsg+content);
divCalendar.document.close()
var p=Calendar_obj;
var eT=0,eL=0,eH=0,dH=0,sT=0,eP=p
while(p && p.tagName!="body"){
eT+=p.offsetTop; //距窗口顶部距离
eL+=p.offsetLeft; //距窗口左边距离
p=p.offsetParent;}
var eH=eP.offsetHeight; //输入框高度
var eW=eP.offsetWidth; //输入框宽度
var dH=Calendar.style.pixelHeight; //框架高度
Calendar.style.top=(eT+dH>document.body.scrollHeight && eT-dH>=0)?eT-dH+'px':eT+eH+'px';
Calendar.style.left=(eL+206>document.body.scrollWidth && eL-206+eW>=0)?eL-
206+eW+'px':eL+'px';
setTimeout("document.getElementById('divCalendar').style.display=''",1);
}
/*是否润年*/
function IsLeapYear(y){
if(0==y%4 && ((y%100!=0)||(y%400==0))){return true;}
else{return false;}
}
function Calendar_Modif(y,m,d)
{
if(m<1){m=12;y=y-1;}
if(m>12){m=1;y=y+1;}
var num=(IsLeapYear(y) && m==2)?MonthDNum[m]+1:MonthDNum[m];
if(d>num){d=num;}
Calendar_Show(y,m,d)
}
function Calendar(obj,obj2) //选择本月
{
var p=Calendar_obj=document.getElementById(obj);
Calendar_obj2=document.getElementById(obj2);
var re=/\d{4}-\d{1,2}-\d{1,2}/;
var arr,Sdate;
arr=re.exec(Calendar_obj.value);
if(arr!=null){Sdate=Calendar_obj.value;}
else{var mydate=new Date();
Sdate=mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDate();}
Sdate=Sdate.split("-");
Calendar_Show(parseInt(Sdate[0]),parseInt(Sdate[1]),parseInt(Sdate[2]));
}
function Calendar_GetDate(y,m,d)
{
if(!Calendar_obj2||d!=0){
if(d>0){Calendar_obj.value=y+'-'+m+'-'+d;}
else{
var objEvent=divCalendar.event||arguments.callee.caller.arguments[0];
var srcElement=objEvent.srcElement;
if(!srcElement){srcElement=objEvent.target;}
Calendar_obj.value=y+'-'+m+'-'+srcElement.innerHTML;
}
}
else{
if(IsLeapYear(y) && m==2){num=MonthDNum[m]+1;}
else{num=MonthDNum[m];}
Calendar_obj.value=y+'-'+m+'-1';
Calendar_obj2.value=y+'-'+m+'-'+num;
}
Calendar_hide();}
function Calendar_hide() {
document.getElementById("divCalendar").style.display="none";
}
document.onclick=Calendar_hide;
JavaScript日历控件！JS兼容IE6.7.FF.可挡住下拉控件的更多相关文章
- 一不小心写了个bootstrap风格下拉控件 JqueryUI + bootstrap
受够了EasyUI的封闭,Bootstrap虽然华丽但是功能太渣,闲着无聊写个下拉控件玩玩吧,不喜勿喷哈... 第一步:先设计下我的下拉控件的样子 1.既然是bootstrap风格的,我想应该是这样的 ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- 基于bootstrap的multiple-select下拉控件使用
multiple-select是一款优秀的下拉菜单控件,能够支持单选和多选. 详细参考文档: JS组件系列——两种bootstrap multiselect组件大比拼 multiple-select ...
- ActiveX控件的基本操作方法以及如何在VS2010下使用控件
在此,小编就介绍下ActiveX控件的基本操作方法以及如何在VS2010下使用控件,我们以一个程序为例, (1) 打开VS2010编译器(右键以管理员身份运行,因为ActiveX需要注册), ...
- DevExpress控件GridView挂下拉控件无法对上值
下拉控件使用RepositoryItemLookUpEdit,加入如下事件进行处理. repositoryItemLookUpEdit1.CustomDisplayText += new DevExp ...
- scrollview嵌套下拉控件嵌套recyclerview（不动第三方原基础自定义）
相信会碰到很多类似的需求,一个列表控件,然后控件上方的一个头部需要自定义,这样就不好有时候也不能加在列表控件的头部了,那必须得嵌套一层scrollview了,没毛病,那么一般的列表控件都是有上拉下拉的 ...
- 下拉控件jQuery插件
由于后端开发需要一个下拉控件,能输入,能选择,于是自己写了一个 ;(function($,window,document,undefined){ function Select(el,opt){ th ...
- Ag-grid控件使用pine:left后，配合iview下拉框，会出现闪烁
Ag-grid控件使用pinned:left后,配合iview下拉框,会出现闪烁 引起原因:下拉图标的反转动画 目前解决方案: 添加一个全局样式: 禁用动画,其他地方也是如此, 影响控件有:gz-tr ...
- 解决easyUI下拉控件无法触发onkeydown事件
实现在combotree下拉控件中按Backspace键清除combotree选中的值 下面的代码无法获取到键盘事件 <input class="easyui-combotree&qu ...
随机推荐
- POJ 2774 后缀数组 || 二分+哈希
Long Long Message Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 35607 Accepted: 14 ...
- mysql中如何不重复插入,mysql 重复的不插入,mysql唯一的插入
INSERT INTO new_schedules_spider_shipsname ( ID,SCAC,VESSEL,VOYAGE,SERVICE_NAME,MD5 ) SELECT NULL,%s ...
- 使用IP访问本地网站缓慢解决方法
运行环境: win7 64位 apache2.4 php-5.6.37 最近由于业务需要,需要使用php5.6版本,所以配套升级了apache到2.4,但升级以后,发现用公司内网IP访问网站非常非常慢 ...
- php使用curl获取文本出现中文乱码的解决办法
在使用php的curl获取远程html文本时出现了中文乱码. 解决办法的代码如下: $url = "www.ecjson.com";//获取页面内容$ch = curl_init( ...
- C语言实例解析精粹学习笔记——44（冒泡排序）
冒泡排序,从序列的最后一个元素与前一个元素比较大小,如果R[n-1]>R[n]则交换两个元素的位置(R[0]作为临时存放区)将最小的数据交换到R[1],第二次循环将第二小的数交换到R[2].通过 ...
- HDOJ 2120 Ice_cream's world I
Ice_cream's world I ice_cream's world is a rich country, it has many fertile lands. Today, the queen ...
- adb offline解决办法
假如你连接手机之后,adb devices找不到设备,或者找到了设备,但是device ID后总是offline的状态,那估计就是驱动有问题. 强烈建议1.安装豌豆荚,它可以自己主动修复手机驱动,一般 ...
- 命令java 找不到或无法加载主类
这个是由于用了package导致cmd下找不到class文件产生的错误,解决方案: 方法1.删除HelloWord.java源程序中的第一行package demo1:然后在cmd下正常使用javac ...
- 用go和zk实现一个简单的分布式server
golang的zk客户端 最近打算写个简单的配置中心,考虑到实现便捷性,语言选择了go,由于其中计划用到zk,就调研了下golang的zk客户端,并实现了个简单的分布式server.最终找到了两个,地 ...
- 大数据面试（HR电话了解）
1什么是HA集群? 所谓HA,即高可用(7*24小时不中断服务) HA集群是hadoop高可用集群,即有两个namenode,一个active,一个stanby,active的name挂掉之后,sta ...