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 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 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
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
JS 常用校验函数
2009/03/26 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
script标签属性用type还是language
2015/01/21 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
angular分页指令操作
2017/01/09 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
复古服装:RetroStage
2019/05/10 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
小班重阳节活动方案
2014/02/08 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
golang 接口嵌套实现复用的操作
2021/04/29 Golang