JavaScript实现的日期控件具体代码


Posted in Javascript onNovember 18, 2013
<html> 
<head> 
<style> 
<!-- 
.wr{font-size: 12pt; line-height: 22px} 
.wr1 {  FONT-SIZE: 12px; LINE-HEIGHT: 200%} 
.wr2 {  FONT-SIZE: 14px; LINE-HEIGHT: 200%} 
.wr3 {  FONT-SIZE: 12px} 
.wr4 {  FONT-SIZE: 12px; LINE-HEIGHT: 150%} 
// --> 
</style> <title>日期自动输入控件</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<style type="text/css"> 
.date-picker-wp { 
display: none; 
position: absolute; 
background: #f1f1f1; 
left: 40px; 
top: 40px; 
border-top: 4px solid #3879d9; 
} 
.date-picker-wp table { 
border: 1px solid #ddd; 
} 
.date-picker-wp td { 
background: #fafafa; 
width: 22px; 
height: 18px; 
border: 1px solid #ccc; 
font-size: 12px; 
text-align: center; 
} 
.date-picker-wp td.noborder { 
border: none; 
background: none; 
} 
.date-picker-wp td a { 
color: #1c93c4; 
text-decoration: none; 
} 
.strong {font-weight: bold} 
.hand {cursor: pointer; color: #3879d9} 
</style> 
<script type="text/javascript"> 
var DatePicker = function () { 
var $ = function (i)  
{ 
   return document.getElementById(i) 
}, 
addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})}, 
getPos = function (el) { 
for (var pos = {x:0, y:0}; el; el = el.offsetParent) { 
pos.x += el.offsetLeft; 
pos.y += el.offsetTop; 
} 
return pos; 
}; 
var init = function (n, config) { 
window[n] = this; 
Date.prototype._fd = function () {var d = new Date(this); d.setDate(1); return d.getDay()}; 
Date.prototype._fc = function () {var d1 = new Date(this), d2 = new Date(this); d1.setDate(1); d2.setDate(1); d2.setMonth(d2.getMonth()+1); return (d2-d1)/86400000;}; 
this.n = n; 
this.config = config; 
this.D = new Date; 
this.el = $(config.inputId); 
this.el.title = this.n+'DatePicker'; 
this.update(); 
this.bind(); 
}; 
init.prototype = { 
update : function (y, m) { 
var con = [], week = ['Su','Mo','Tu','We','Th','Fr','Sa'], D = this.D, _this = this; 
fn = function (a, b) {return '<td title="'+_this.n+'DatePicker" class="noborder hand" onclick="'+_this.n+'.update('+a+')">'+b+'</td>'}, 
_html = '<table cellpadding=0 cellspacing=2>'; 
y && D.setYear(D.getFullYear() + y); 
m && D.setMonth(D.getMonth() + m); 
var year = D.getFullYear(), month = D.getMonth() + 1, date = D.getDate(); 
for (var i=0; i<week.length; i++) con.push('<td title="'+this.n+'DatePicker" class="noborder">'+week[i]+'</td>'); 
for (var i=0; i<D._fd(); i++ ) con.push('<td title="'+this.n+'DatePicker" class="noborder"> </td>'); 
for (var i=0; i<D._fc(); i++ ) con.push('<td class="hand" onclick="'+this.n+'.fillInput('+year+', '+month+', '+(i+1)+')">'+(i+1)+'</td>'); 
var toend = con.length%7; 
if (toend != 0) for (var i=0; i<7-toend; i++) con.push('<td class="noborder"> </td>'); 
_html += '<tr>'+fn("-1, null", "<<")+fn("null, -1", "<")+'<td title="'+this.n+'DatePicker" colspan=3 class="strong">'+year+'/'+month+'/'+date+'</td>'+fn("null, 1", ">")+fn("1, null", ">>")+'</tr>'; 
for (var i=0; i<con.length; i++) _html += (i==0 ? '<tr>' : i%7==0 ? '</tr><tr>' : '') + con[i] + (i == con.length-1 ? '</tr>' : ''); 
!!this.box ? this.box.innerHTML = _html : this.createBox(_html); 
}, 
fillInput : function (y, m, d) { 
var s = this.config.seprator || '/'; 
this.el.value = y + s + m + s + d; 
this.box.style.display = 'none'; 
}, 
show : function () { 
var s = this.box.style, is = this.mask.style; 
s['left'] = is['left'] = getPos(this.el).x + 'px'; 
s['top'] = is['top'] = getPos(this.el).y + this.el.offsetHeight + 'px'; 
s['display'] = is['display'] = 'block'; 
is['width'] = this.box.offsetWidth - 2 + 'px'; 
is['height'] = this.box.offsetHeight - 2 + 'px'; 
}, 
hide : function () { 
this.box.style.display = 'none'; 
this.mask.style.display = 'none'; 
}, 
bind : function () { 
var _this = this; 
addEvent(document, 'click', function (e) { 
e = e || window.event; 
var t = e.target || e.srcElement; 
if (t.title != _this.n+'DatePicker') {_this.hide()} else {_this.show()} 
}); 
}, 
createBox : function (html) { 
var box = this.box = document.createElement('div'), mask = this.mask = document.createElement('iframe'); 
box.className = this.config.className || 'datepicker'; 
mask.src = 'javascript:false'; 
mask.frameBorder = 0; 
box.style.cssText = 'position:absolute;display:none;z-index:9999'; 
mask.style.cssText = 'position:absolute;display:none;z-index:9998'; 
box.title = this.n+'DatePicker'; 
box.innerHTML = html; 
document.body.appendChild(box); 
document.body.appendChild(mask); 
return box; 
} 
}; 
return init; 
}(); 
onload = function () { 
new DatePicker('_DatePicker_demo', { 
inputId: 'date-input', 
className: 'date-picker-wp', 
seprator: '-' 
}); 
} 
</script> 

<body bgcolor="#FFFFDB" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<form > 
  <table border="0" width="60%" align="center"> 
   <tr> 
     <td width="45%" class="wr4" align="right"> 生日:</td> 
     <td width="55%" class="wr4"> 
         <input type="text" name="mtime" id="date-input">  <font color="RED">*</font>         
     </td> 
   </tr> 
  <tr>  
     <td width="45%" align="right"><input type = "submit" value = "确定"/></td>  
     <td width="55%"><input type = "reset" value = "重置"/></td>  
  </tr> 
</table> 
</form> 
</body> 
</html>

html页面中的js执行顺序:
1) 在head标签内的最先执行
2) 在body标签内的 执行
3) 当在 body标签中 加了 onload  事件时 对应的 js 最后执行,也就是当页面加载完在执行

注意:当在 body标签中 加了 onload  事件时 在head标签内,所引用外部的 js 不起作用,当换成 在body 内部或</html>之上引用外部js时可正常引用

Javascript 相关文章推荐
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
React简单介绍
May 24 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 #Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 #Javascript
js call方法详细介绍(js 的继承)
Nov 18 #Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 #Javascript
jQuery客户端分页实例代码
Nov 18 #Javascript
javascript验证身份证完全方法具体实现
Nov 18 #Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 #Javascript
You might like
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP连接Access数据库的方法小结
2013/06/20 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
python中append函数用法讲解
2020/12/11 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
市场营销方案范文
2014/03/11 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python