javascript实现的简易的DatePicker日历_时间日期
程序员文章站
2022-06-01 18:12:59
...
jQ的ui有,YUI的widget里也有。而且也封装的结结实实,兼容性,通用性,都做得挺好。于是在代码完善的同时,代码量自然也不会少。即使建立在基础库之上,代码也是好几百行。
真正使用的时候可能并不需要这么完善的功能。咱们就写个简陋点的东西,够自己用就行了。
而且以前有朋友提出我发的东西都是一些娱乐货,没有什么实用性,这次就当是个开始,抛个砖,以后时不时发个带一些实用性的东东。
[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 = '';
真正使用的时候可能并不需要这么完善的功能。咱们就写个简陋点的东西,够自己用就行了。
而且以前有朋友提出我发的东西都是一些娱乐货,没有什么实用性,这次就当是个开始,抛个砖,以后时不时发个带一些实用性的东东。
[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 '
_html = '
推荐阅读
-
asp.net(C#)实现功能强大的时间日期处理类完整实例
-
教你3分钟了解Android 简易时间轴的实现方法
-
Python实现根据日期获取当天凌晨时间戳的方法示例
-
仅2行代码的javascript按指定格式显示日期时间效果
-
Android日期时间格式国际化的实现代码
-
javascript实现的简易的DatePicker日历
-
JavaScript 判断日期格式是否正确的实现代码
-
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
-
JavaScript实现实时更新系统时间的实例代码
-
浅谈javascript中关于日期和时间的基础知识
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论