一个简洁的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. appium 环境搭建 java

    1 安装node.js 1.1 安装node.js http://nodejs.cn/download/ 1.2.下载后直接点击exe,按照提示一步一步的安装 1.3 安装成功后,运行cmd,输入no ...

  2. 扩展JQuery和JS的方法

    //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            var aClass = function(){} //1 定义这个类的静态方法            aC ...

  3. 一条SQL查询多个统计结果

    例如以下情况,假如字段3是日期类型,按照小时分组统计字段1为空的个数,并对字段2大于5的值求和: SELECT SUM(CASE WHEN field1 IS NULL THEN 1 ELSE 0 E ...

  4. 【android】Android am命令使用

    一.开启Activity.服务.广播 1.开启Activity.服务.广播基础知识 通过adb shell,可以使用activity manager(arm)工具来执行不同的系统操作,如开启一个act ...

  5. 承接Hololens内容定制外包

    近日,微软宣布第三批微软Hololens开发者版开始发货,包括:头显.头显手提包和一个遥控器.前两批开发者版本分别在今年3月30日和5月9日开始发货的. 第三批AR头显Hololens开发者版发货 虽 ...

  6. rails下自动更新静态文件的gem包

    https://github.com/guard/guard-livereload gemfile group :development do gem 'guard-livereload', '~&g ...

  7. MSSQL 批量Update

    UPDATE dbo.WX_TWODIMENCODE_INFO SET wti_scan_views=t.count FROM ( SELECT COUNT(*) AS 'count',lci_ere ...

  8. EasyUI TreeGrid DataTable转换数据实现案例

    C#部分 /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandle ...

  9. haproxy +keepalived 原创

    Haproxy+keepalived 原理: HAProxy介绍及其定位 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.根 ...

  10. OAF_开发系列06_实现OAF属性集的介绍和开发Attribute Set（案例）

    20150705 Created By BaoXinjian