一个简洁的date picker

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker - http://www.codefans.net</title>
<style>
.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">&nbsp;</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">&nbsp;</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: '-'
});
new DatePicker('_demo2', {inputId: 'demo2', className: 'date-picker-wp'})
}
</script></head>
<body>
<input type="text" id="date-input" />
<input type="text" id="demo2" /><br/>
</body>
</html>

转自http://www.codefans.net/jscss/code/2392.shtml

javascript date picker的更多相关文章

  1. asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天

    可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...

  2. JavaScript Date 对象

    JavaScript Date 对象 Date 对象 Date 对象用于处理日期与实际. 创建 Date 对象: new Date(). 以上四种方法同样可以创建 Date 对象: var d = n ...

  3. JavaScript Date对象 日期获取函数

    JavaScript Date对象使用小例子: 运行结果: 总结: 1.尽管我们认为12月是第12个月份,但是JavaScript从0开始计算月份,所以月份11表示12月: 2.nowDate.set ...

  4. iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

    iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...

  5. Date Picker Calendar For Oracle Forms 6i

    Giving date picker calendar option to user for date type fields in Oracle Forms. I am providing you ...

  6. Freebie: Date Picker Calendar Demo Form For Oracle Forms 6i

    I have already posted and provided the required PLSQL Library and the Calendar FMX file in my previo ...

  7. JavaScript Date（日期） 对象

    日期对象用于处理日期和时间. 如何使用 Date() 方法获得当日的日期. getFullYear()使用 getFullYear() 获取年份. getTime()getTime() 返回从 197 ...

  8. JavaScript Date对象介绍

    原文:JavaScript Date对象介绍 Date 日期和时间对象 1. 介绍 Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 2. 构造函数 2.1 new ...

  9. JavaScript Date（日期）对象

    返回当日的日期和时间 如何使用 Date() 方法获得当日的日期. getFullYear() 使用 getFullYear() 获取年份. getTime() getTime() 返回从 1970 ...

随机推荐

  1. maven 环境搭建

    1.maven环境搭建 1)下载maven,http://maven.apache.org/download.cgi,到本地解压,然后配置环境变量 MAVEN_HOME:D:\software\apa ...

  2. JS 进制转换

    十进制转换成其他进制 objectname.toString([radix])   objectname 必选项.要得到字符串表示的对象. radix 可选项.指定将数字值转换为字符串时的进制. 例如 ...

  3. switch

    关于java中switch使用的一些说明 switch(表达式) { case常量表达式1:语句1; .... case常量表达式2:语句2; default:语句; } default就是如果没有符 ...

  4. iOS获取UUID，并使用keychain存储

    http://blog.sina.com.cn/s/blog_5971cdd00102vqgy.html

  5. Activity Intent Flags及Task相关属性

    转自http://www.cnblogs.com/lwbqqyumidi/p/3775479.html 今天我们来讲一下Activity的task相关内容. 上次我们讲到Activity的四种启动模式 ...

  6. JLINK通过JFLASH烧写bin文件报错处理方法

    错误原因:烧写开始地址出错,打开BIN文件后弹出的设置开始地址不正确不能为0 解决措施:用J-FLASH LITE或者将开始地址设置成正确的地址(KEILMDK中IROM1的开始地址

  7. Android EditText输入格式设置

    在开发的过程中,通常会用到EditText,如何让虚拟键盘来适应输入框中内容的类型,通常我们都会在xml文件中加入android:inputType="". android:inp ...

  8. SQLServer 创建dtsx包更新统计信息（示例）

    http://blog.csdn.net/kk185800961/article/details/43816177(转载) 1 . 打开Microsoft Visual Studio 创建 integ ...

  9. Heka 的编译 和 Heka 插件的编译

    相关英文文档在: https://hekad.readthedocs.io/en/latest/installing.html 所有系统都必须的如下: Prerequisites (all syste ...

  10. Conway's law(康威定律)

    Mel Conway  康威在加利福尼亚理工学院获得物理学硕士学位,在凯斯西储大学获得数学博士学位.毕业之后,他参与了很多知名的软件项目,如 Pascal 编辑器.在他的职业生涯中,康威观察到一个现象 ...