JS时间选择器 兼容IE6,7,8,9


Posted in Javascript onJune 26, 2012

在线演示: http://demo.3water.com/js/2012/js_date/

<html> 
<head> 
<title>Js日期选择器并自动加入到输入框中</title> 
<meta http-equiv="content-Type" content="text/html;charset=gb2312"> 
<script type="text/javascript"> 
var gMonths=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"); 
var WeekDay=new Array("日","一","二","三","四","五","六"); 
var strToday="今天"; 
var strYear="年"; 
var strMonth="月"; 
var strDay="日"; 
var splitChar="-"; 
var startYear=2000; 
var endYear=2050; 
var dayTdHeight=12; 
var dayTdTextSize=12; 
var gcNotCurMonth="#E0E0E0"; 
var gcRestDay="#FF0000"; 
var gcWorkDay="#444444"; 
var gcMouseOver="#79D0FF"; 
var gcMouseOut="#F4F4F4"; 
var gcToday="#444444"; 
var gcTodayMouseOver="#6699FF"; 
var gcTodayMouseOut="#79D0FF"; 
var gdCtrl=new Object(); 
var goSelectTag=new Array(); 
var gdCurDate=new Date(); 
var giYear=gdCurDate.getFullYear(); 
var giMonth=gdCurDate.getMonth()+1; 
var giDay=gdCurDate.getDate(); 
function $(){var elements=new Array();for(var i=0;i<arguments.length;i++) {var element=arguments[i];if(typeof(arguments[i])=='string'){element=document.getElementById(arguments[i]);}if(arguments.length==1){return element;}elements.Push(element);}return elements;} 
Array.prototype.Push=function(){var startLength=this.length;for(var i=0;i<arguments.length;i++){this[startLength+i]=arguments[i];}return this.length;} 
String.prototype.HexToDec=function(){return parseInt(this,16);} 
String.prototype.cleanBlank=function(){return this.isEmpty()?"":this.replace(/\s/g,"");} 
function checkColor(){var color_tmp=(arguments[0]+"").replace(/\s/g,"").toUpperCase();var model_tmp1=arguments[1].toUpperCase();var model_tmp2="rgb("+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(5).HexToDec()+")";model_tmp2=model_tmp2.toUpperCase();if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true;}return false;} 
function $V(){return $(arguments[0]).value;} 
function fPopCalendar(evt,popCtrl,dateCtrl){evt.cancelBubble=true;gdCtrl=dateCtrl;fSetYearMon(giYear,giMonth);var point=fGetXY(popCtrl);with($("calendardiv").style){left=point.x+"px";top=(point.y+popCtrl.offsetHeight+1)+"px";visibility='visible';zindex='99';position='absolute';}$("calendardiv").focus();} 
function fSetDate(iYear,iMonth,iDay){var iMonthNew=new String(iMonth);var iDayNew=new String(iDay);if(iMonthNew.length<2){iMonthNew="0"+iMonthNew;}if(iDayNew.length<2){iDayNew="0"+iDayNew;}gdCtrl.value=iYear+splitChar+iMonthNew+splitChar+iDayNew;fHideCalendar();} 
function fHideCalendar(){$("calendardiv").style.visibility="hidden";for(var i=0;i<goSelectTag.length;i++){goSelectTag[i].style.visibility="visible";}goSelectTag.length=0;} 
function fSetSelected(){var iOffset=0;var iYear=parseInt($("tbSelYear").value);var iMonth=parseInt($("tbSelMonth").value);var aCell=$("cellText"+arguments[0]);aCell.bgColor=gcMouseOut;with(aCell){var iDay=parseInt(innerHTML);if(checkColor(style.color,gcNotCurMonth)){iOffset=(innerHTML>10)?-1:1;}iMonth+=iOffset;if(iMonth<1){iYear--;iMonth=12;}else if(iMonth>12){iYear++;iMonth=1;}}fSetDate(iYear,iMonth,iDay);} 
function Point(iX,iY){this.x=iX;this.y=iY;} 
function fBuildCal(iYear,iMonth){var aMonth=new Array();for(var i=1;i<7;i++){aMonth[i]=new Array(i);}var dCalDate=new Date(iYear,iMonth-1,1);var iDayOfFirst=dCalDate.getDay();var iDaysInMonth=new Date(iYear,iMonth,0).getDate();var iOffsetLast=new Date(iYear,iMonth-1,0).getDate()-iDayOfFirst+1;var iDate=1;var iNext=1;for(var d=0;d<7;d++){aMonth[1][d]=(d<iDayOfFirst)?(iOffsetLast+d)*(-1):iDate++;}for(var w=2;w<7;w++){for(var d=0;d<7;d++){aMonth[w][d]=(iDate<=iDaysInMonth)?iDate++:(iNext++)*(-1);}}return aMonth;} 
function fDrawCal(iYear,iMonth,iCellHeight,iDateTextSize){var colorTD=" bgcolor='"+gcMouseOut+"' bordercolor='"+gcMouseOut+"'";var styleTD=" valign='middle' align='center' style='height:"+iCellHeight+"px;font-weight:bolder;font-size:"+iDateTextSize+"px;";var dateCal="";dateCal+="<tr>";for(var i=0;i<7;i++){dateCal+="<td"+colorTD+styleTD+"color:#990099'>"+WeekDay[i]+"</td>";}dateCal+="</tr>";for(var w=1;w<7;w++){dateCal+="<tr>";for(var d=0;d<7;d++){var tmpid=w+""+d;dateCal+="<td"+styleTD+"cursor:pointer;' onclick='fSetSelected("+tmpid+")'>";dateCal+="<span id='cellText"+tmpid+"'></span>";dateCal+="</td>";}dateCal+="</tr>";}return dateCal;} 
function fUpdateCal(iYear,iMonth){var myMonth=fBuildCal(iYear,iMonth);var i=0;for(var w=1;w<7;w++){for(var d=0;d<7;d++){with($("cellText"+w+""+d)){parentNode.bgColor=gcMouseOut;parentNode.borderColor=gcMouseOut;parentNode.onmouseover=function(){this.bgColor=gcMouseOver;};parentNode.onmouseout=function(){this.bgColor=gcMouseOut;};if(myMonth[w][d]<0){style.color=gcNotCurMonth;innerHTML=Math.abs(myMonth[w][d]);}else{style.color=((d==0)||(d==6))?gcRestDay:gcWorkDay;innerHTML=myMonth[w][d];if(iYear==giYear && iMonth==giMonth && myMonth[w][d]==giDay){style.color=gcToday;parentNode.bgColor=gcTodayMouseOut;parentNode.onmouseover=function(){this.bgColor=gcTodayMouseOver;};parentNode.onmouseout=function(){this.bgColor=gcTodayMouseOut;};}}}}}} 
function fSetYearMon(iYear,iMon){$("tbSelMonth").options[iMon-1].selected=true;for(var i=0;i<$("tbSelYear").length;i++){if($("tbSelYear").options[i].value==iYear){$("tbSelYear").options[i].selected=true;}}fUpdateCal(iYear,iMon);} 
function fPrevMonth(){var iMon=$("tbSelMonth").value;var iYear=$("tbSelYear").value;if(--iMon<1){iMon=12;iYear--;}fSetYearMon(iYear,iMon);} 
function fNextMonth(){var iMon=$("tbSelMonth").value;var iYear=$("tbSelYear").value;if(++iMon>12){iMon=1;iYear++;}fSetYearMon(iYear,iMon);} 
function fGetXY(aTag){var oTmp=aTag;var pt=new Point(0,0);do{pt.x+=oTmp.offsetLeft;pt.y+=oTmp.offsetTop;oTmp=oTmp.offsetParent;}while(oTmp.tagName.toUpperCase()!="BODY");return pt;} 
function getDateDiv(){var noSelectForIE="";var noSelectForFireFox="";if(document.all){noSelectForIE="onselectstart='return false;'";}else{noSelectForFireFox="-moz-user-select:none;";}var dateDiv="";dateDiv+="<div id='calendardiv' onclick='event.cancelBubble=true' "+noSelectForIE+" style='"+noSelectForFireFox+"position:absolute;z-index:99;visibility:hidden;border:1px solid #999999;'>";dateDiv+="<table border='0' bgcolor='#E0E0E0' cellpadding='1' cellspacing='1' >";dateDiv+="<tr>";dateDiv+="<td><input type='button' id='PrevMonth' value='<' style='height:20px;width:20px;font-weight:bolder;' onclick='fPrevMonth()'>";dateDiv+="</td><td><select id='tbSelYear' style='border:1px solid;' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'>";for(var i=startYear;i<endYear;i++){dateDiv+="<option value='"+i+"'>"+i+strYear+"</option>";}dateDiv+="</select></td><td>";dateDiv+="<select id='tbSelMonth' style='border:1px solid;' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'>";for(var i=0;i<12;i++){dateDiv+="<option value='"+(i+1)+"'>"+gMonths[i]+"</option>";}dateDiv+="</select></td><td>";dateDiv+="<input type='button' id='NextMonth' value='>' style='height:20px;width:20px;font-weight:bolder;' onclick='fNextMonth()'>";dateDiv+="</td>";dateDiv+="</tr><tr>";dateDiv+="<td align='center' colspan='4'>";dateDiv+="<div style='background-color:#cccccc'><table width='100%' border='0' cellpadding='3' cellspacing='1'>";dateDiv+=fDrawCal(giYear,giMonth,dayTdHeight,dayTdTextSize);dateDiv+="</table></div>";dateDiv+="</td>";dateDiv+="</tr><tr><td align='center' colspan='4' nowrap>";dateDiv+="<span style='cursor:pointer;font-weight:bolder;' onclick='fSetDate(giYear,giMonth,giDay)' onmouseover='this.style.color=\""+gcMouseOver+"\"' onmouseout='this.style.color=\"#000000\"'>"+strToday+":"+giYear+strYear+giMonth+strMonth+giDay+strDay+"</span>";dateDiv+="</tr></tr>";dateDiv+="</table></div>";return dateDiv;} 
with(document){onclick=fHideCalendar;write(getDateDiv());} 
</script> 
</head> 
<body> 
<input type="text" style="border:1px solid #999;" onclick="fPopCalendar(event,this,this)" onfocus="this.select()" readonly="readonly" /> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
javascript的内存管理详解
Aug 07 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 #Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 #Javascript
Jvascript学习实践案例(开发常用)
Jun 25 #Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 #Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 #Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 #Javascript
javascript作用域容易记错的两个地方分析
Jun 22 #Javascript
You might like
中东人咖啡哲学
2021/03/03 咖啡文化
如何利用php+mysql保存和输出文件
2006/10/09 PHP
图书管理程序(二)
2006/10/09 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python中的闭包总结
2014/09/18 Python
python统计cpu利用率的方法
2015/06/02 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
中学教师岗位职责
2013/11/26 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang