Js日期选择器并自动加入到输入框中示例代码


Posted in Javascript onAugust 02, 2013
<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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
基于JSON数据格式详解
Aug 31 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
javascript实现画板功能
Apr 12 Javascript
js动态给table添加/删除tr的方法
Aug 02 #Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 #Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 #Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 #Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 #Javascript
JS解决ie6下png透明的方法实例
Aug 02 #Javascript
用innerhtml提高页面打开速度的方法
Aug 02 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
修改发贴的编辑功能
2007/03/07 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
jQuery中extend函数详解
2015/02/13 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
js实现磁性吸附的示例
2020/10/26 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Python json模块使用实例
2015/04/11 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
聊聊Python中的pypy
2018/01/12 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
深入了解Python 变量作用域
2020/07/24 Python
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
物理力学求职信
2014/02/18 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
场地使用证明模板
2014/10/25 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
关于mysql中string和number的转换问题
2022/06/14 MySQL
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
python如何读取和存储dict()与.json格式文件
2022/06/25 Python