软件开发培训班 >> 编程开发 >> JavaScript


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

　　本文标签：JavaScript,日期控件

复制代码 代码如下:

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