JavaScript实现的日期控件 - 软件开发资料库 - ITeye博客

`

wapysun

浏览: 21554440 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

最新评论

ZY199266：配置文件还需要额外的配置ma
Android 客户端通过内置API（HttpClient) 访问服务器(用Spring MVC 架构) 返回的json数据全过程
ZY199266：我的一访问为什么是 /mavenwebdemo/WEB-I ...
Android 客户端通过内置API（HttpClient) 访问服务器(用Spring MVC 架构) 返回的json数据全过程
lvgaga：我又一个问题就是如果像你的这种形式写。配置文件还需要额外的 ...
Android 客户端通过内置API（HttpClient) 访问服务器(用Spring MVC 架构) 返回的json数据全过程
lvgaga：我的一访问为什么是 /mavenwebdemo/WEB-I ...
Android 客户端通过内置API（HttpClient) 访问服务器(用Spring MVC 架构) 返回的json数据全过程
y1210251848：你的那个错误应该是项目所使用的目标框架不支持吧
log4net配置(web中使用log4net,把web.config放在单独的文件中)

JavaScript实现的日期控件

阅读更多

JavaScript实现的日期控件

它还会读取当前的时间

<html>
<head>
<style>

</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时可正常引用

分享到：

腾讯变局旁观——推动管理的动机 | Visual Studio 2008的一些小技巧

2012-05-17 11:12
浏览 821
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

javascript实现日期控件: 用js实现的日期控件，只需要包含js即可，应用方便

JavaScript实现日历控件: 实现日历控件的脚本文件，调用ShowCalendar(InId),InId表示文本框的ID,就可实现漂亮的日历控件啦。

javascript实现的日期控件: 一个不错的js实现的日期控件。看例子直接就会用了。简单。

javascript实现日历控件(年月日关闭按钮): 经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: ”a”>”head”>”yface”>年:<select id=”year”>&lt...

javascript 日期时间控件: 一个强大的日期时间空间，只要简单的导入就能实现，效果不错

javascript右键菜单控件，树控件，日期控件: javascript右键菜单控件，树控件，日期控件，有详细说明并有实例演示树控件右键菜单日期控件树控件：实现树型数据结构的基本展现方式，提供树节点的查找和维护右键菜单：提供独立的右键菜单组件，可...

javascript中日历控件: 使用js实现一个日历控件，可以选择日期，我们一般注册页面上需要填写的日期比如生日，就会经常遇到这样的控件，使用起来很简单，只要你把上述文件引入到html或者jsp文件的合适位置即可

javascript日期控件二: javascript实现的日期控件，使用简单，导入即用

javascript日期控件实现: 自己练习做的日期控件，能够实现动态生成Dom

史上最强JavaScript日历控件正式版(无偿的永久的提供给大家免费使用，含全部源代码): 功能强大的JavaScript日历控件最关键的，无偿的永久的提供给大家免费使用，含全部源代码。功能简介：一、更人性化,更全面的功能大部分日期控件都具备这些功能,但是本日历控件做的更全面,更人性化,并且速度...

JS实现的日历控件: 用javascript实现的年月日控件，在web应用中能够很好地完成对时间的操作

js实现的日期控件: 用javaScript实现的一个日历，在一个文本框中你点击后会弹出一个日历给你选择日期，选择后日期显示在文本框中

javascript 漂亮效果日历控件: 用javascript 实现的一个很漂亮效果日历控件

利用js和css创建日历控件: 使用css和javascript技术实现日历控件，可以更好的对日历的日期进行控制

用javascript实现的简单日历控件: 大部分日期控件都具备功能如:带时间显示,支持周显示,自定义格式,自动纠错,智能纠错,起始日期,操作按钮自定义,快速选择日期,支持多种调用模式等,My97DatePicker在这些方面做得更全面,更人性化,并且速度一流. ...

用javascript实现的非常好的日历控件: 用js实现的非常好的日历控件，很漂亮，直接加载进去就可以使用

JavaScript实现的时间选择控件: JavaScript实现的时间选择控件时间日历，时间选技器

javascript特殊日历控件分享: 主要为大家详细介绍了javascript特殊日历控件的使用方法，展示了javascript日历控件实现效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

用Javascript设计通用日历控件及其与ASP的结合应用: 1.1.1 制作通用日历控件的意义 1 1.1.2 使用JavaScript的必要性 1 1.2 相关技术 2 1.2.1 JavaScript 2 1.2.2 Asp 3 1.2.3 结构化查询语言——SQL 4 第二章通用日历控件的功能分析 5 2.1 按需显示 5 2.2 多日期选择...

Global site tag (gtag.js) - Google Analytics