首页 > web前端 > js教程 > 正文

javascript实现的简易的DatePicker日历_时间日期

php中文网
发布: 2016-05-16 18:10:39
原创
1402人浏览过

jQ的ui有,YUI的widget里也有。而且也封装的结结实实,兼容性,通用性,都做得挺好。于是在代码完善的同时,代码量自然也不会少。即使建立在基础库之上,代码也是好几百行。
真正使用的时候可能并不需要这么完善的功能。咱们就写个简陋点的东西,够自己用就行了。
而且以前有朋友提出我发的东西都是一些娱乐货,没有什么实用性,这次就当是个开始,抛个砖,以后时不时发个带一些实用性的东东。

Metronic Bootstrap后台模板
Metronic Bootstrap后台模板

Metronic是一套精美的响应式后台管理模板,基于强大的Twitter Bootstrap框架实现。Metronic拥有简洁优雅的Metro UI风格界面,自适应屏幕分辨率大小,兼容PC端和手机移动端。全套模板,包含仪表盘、侧边栏菜单、布局宣传片、电子邮件模板、UI特性、按钮、标签、表格布局、表单组件、多文件上传、悬浮窗文件上传、时间表、博客、新闻、关于我们、联系我们、日历、用户配置文件、锁屏、

Metronic Bootstrap后台模板 275
查看详情 Metronic Bootstrap后台模板

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

以下是源码:
复制代码 代码如下:

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 ''+b+''},
_html = '';
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[i]+'');
for (var i=0; i ');
for (var i=0; i'+(i+1)+'');
var toend = con.length%7;
if (toend != 0) for (var i=0; i ');
_html += '
'+fn("-1, null", "'+year+'/'+month+'/'+date+''+fn("null, 1", ">")+fn("1, null", ">>")+'';
for (var i=0; i' : i%7==0 ? '' : '') + con[i] + (i == con.length-1 ? '' : '');
!!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;
}();

调用方式:
复制代码 代码如下:

new DatePicker('_DatePicker_demo', {
inputId: 'date-input',
className: 'date-picker-wp',
seprator: '-'
});

第一个参数:实例名,
第二个参数一个对象字面量,包括输入框的id(必须),弹出日历box的className,日期样式的分隔符如‘-',‘/',等。后两个可省略,默认值‘datepicker',‘/'。
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号