原生js实现日期选择插件
程序员文章站
2022-03-21 12:45:42
最近公司项目告一段落，想着写个小玩意打发下上班时间，就用js很粗糙的实现了下日期选择插件。间间断断历时1天多，实现了选择日期的功能，从写完的整体代码来看，耦合度还是蛮高的，我觉得还是我对js中的原型继...
最近公司项目告一段落，想着写个小玩意打发下上班时间，就用js很粗糙的实现了下日期选择插件。间间断断历时1天多，实现了选择日期的功能，从写完的整体代码来看，耦合度还是蛮高的，我觉得还是我对js中的原型继承方式理解不深刻，一定有更优雅的方式再优化下这份粗糙的代码，各位前端小伙伴们在看完我的代码后请麻烦指出其中实现的不好的地方，有批评指正让我有动力继续写博客嘛！
先说下这个插件的功能：功能很简单，目前只实现了选择一个日期（当然可以赋初始值，默认是当前日期），选择跨月日期时，会有一个粗糙的动画效果，效果图如下：
然后，说下我写这个插件思路：
1.插件整体是以function dt作为基类，通过choose方法调用，如：$('#txtdt').choose({value: '2018/8/1'});$方法用来选择要传入选择日期的文本控件。插件由head、content、foot3部分组成，head：选择上月、下月、昨日、明日和显示当前选择日期；centent：显示日期列表；foot：关闭
2.dt中render方法会更新属性(年、月、日.....)
3.跨月实现的动画过渡主要通过content中的3个月列表（上月【隐藏】、当月、下月【隐藏】）分别替换来实现，比如显示下月，只需要将下月列表逐步移动到显示区域，将当月移动到上月，再将原上月列表删除，再将最新的下月列表插入到当月之后。思路很简单，小伙伴们看代码就能一目了然了。只是，我对自己实现的上月、下月、昨日和明日的方法很厌恶，代码严重耦合，美观性很差，如果有小伙伴有更好的解决办法，一定要告诉我。
话不多说，附上所有代码：
html部分：
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8" /> <title>日期插件</title> <style> </style> </head> <body> <div style="width:100%;"> <input id="txtdt" type="text" /> </div> </body> </html>
js部分：
(function (){
function dt(selector) {
return new dt.fn.init(selector);
}
dt.fn = dt.prototype = {
constructor: dt,
initialize: false,
init: function (selector) {
if(selector.indexof('#') > -1){
this[0] = document.getelementbyid(selector.substring(1));
} else {
var aryele = document.queryselectorall(selector);
for(var i = 0; i < aryele.length; i++){
this[i] = aryele[i];
}
}
return this;
},
render: function(opt) {
/*
match hour
0 1 2 3 4 5 6 7 8 9
00 01 02 03 04 05 06 07 08 09
10 11 12 13 14 15 16 17 18 19
20 21 22 23
\d
[01]\d | 2[0-3]
match minute second
0 1 2 3 4 5 6 7 8 9
00 01 02 03 04 05 06 07 08 09
10 11 12 13 14 15 16 17 18 19
20 ... 29
...
50 ... 59
\d
[0-5]\d
*/
var regexpdt = /^\d{4}([-/]?)\d{1,2}\1\d{1,2}(?:\s+(?:[01]?\d)|(?:2[0-3])\:[0-5]?\d\:[0-5]?\d)?$/;
if(object.prototype.tostring.apply(opt.value) == '[object date]') {
this.value = opt.value.getfullyear() + '/' + (opt.value.getmonth() + 1) + '/' + opt.value.getdate();
this.date = opt.value;
this.initialize = true;
} else if(object.prototype.tostring.apply(opt.value) == '[object string]') {
this.value = regexpdt.test(opt.value) ? opt.value : '';
this.date = new date(opt.value);
this.initialize = true;
} else {
this.value = '';
this.date = new date();
}
this.year = this.date.getfullyear();
this.month = this.date.getmonth() + 1;
this.day = this.date.getdate();
this.hour = this.date.gethours();
this.minute = this.date.getminutes();
this.second = this.date.getseconds();
this.week = this.date.getday() == 0 ? 7 : this.date.getday();
this.getfirstdateinmonth = function() {
return new date(this.date.getfullyear(), this.date.getmonth(), 1);
}
this.getcaldate = function(dt, type, num) {
var dtrtn = new date();
dtrtn = dt;
switch (type) {
case 'y':
dtrtn = new date(dt.getfullyear() + num, dt.getmonth(), dt.getdate());
break;
case 'm':
dtrtn = new date(dt.getfullyear(), dt.getmonth() + num, dt.getdate());
break;
case 'd':
dtrtn = new date(dt.getfullyear(), dt.getmonth(), dt.getdate() + num);
break;
default:
break;
}
return dtrtn;
}
this.getlastdateinmonth = function() {
var dtrtn = new date();
var dtfirstdateinnextmonth = new date(this.date.getfullyear(), this.date.getmonth() + 1, 1);
dtrtn = this.getcaldate(dtfirstdateinnextmonth, 'd', -1);
return dtrtn;
}
this.count = this.getlastdateinmonth().getdate();
this.formatdate = function(type) {
var strrtn = '',
stryear = '',
strmonth = '',
strday = '';
stryear = this.date.getfullyear();
strmonth = (this.date.getmonth() + 1).tostring().length < 2 ? '0' + (this.date.getmonth() + 1) : (this.date.getmonth() + 1);
strday = this.date.getdate().tostring().length < 2 ? '0' + this.date.getdate() : this.date.getdate();
switch(type.tostring().touppercase()) {
case 'yyyymmdd':
strrtn = stryear + strmonth + strday;
break;
case 'yyyy/mm/dd':
strrtn = stryear + '/' + strmonth + '/' + strday;
break;
case 'yyyy-mm-dd':
strrtn = stryear + '-' + strmonth + '-' + strday;
break;
default:
strrtn = stryear + '/' + strmonth + '/' + strday;
break;
}
return strrtn;
}
return this;
}
};
dt.fn.init.prototype = dt.fn;
dt.fn.extend = dt.extend = function () {
var len = arguments.length,
i = 1,
j,
objrtn = arguments[0];
for(;i < len;i++){
for(var j in arguments[i]){
objrtn[j] = arguments[i][j];
}
}
return objrtn;
}
dt.fn.create = dt.create = function() {
this.render(arguments[0]);
createdatelist.call(this);
}
function insertafter(target, node) {
//node.style.left = target.offsetleft + "px";
if(target.parentnode.children.length == 1) {
target.parentnode.appendchild(node);
} else {
target.parentnode.insertbefore(node, target.nextsibling);
}
}
function setstyle(target, opts) {
for(var item in opts){
target.style[item] = opts[item];
}
}
function createheader() {
var me = this;
var divheader = document.createelement('div');
setstyle(divheader, {
height: '30px',
borderbottom: '1px solid silver',
position: 'relative',
backgroundcolor: 'rgba(214,222,247,1)'
});
var btnlastmonth = document.createelement('div');
btnlastmonth.title = "上月";
btnlastmonth.onclick = function() {
var speed_last_month = 1;
var speed_current_month = 1;
var b_last_month = false;
var b_current_month = false;
var next_month_left = parseint(me.content.nextmonth.component.style.left);
var timer = setinterval(function() {
if(!b_last_month) {
if(parseint(me.container.children[1].style.left) < 0) {
me.container.children[1].style.left = parseint(me.container.children[1].style.left) + math.floor(5 / speed_last_month) + 'px';
speed_last_month += 0.01;
} else {
b_last_month = !b_last_month;
}
}
if(!b_current_month) {
if(parseint(me.container.children[2].style.left) < next_month_left) {
me.container.children[2].style.left = parseint(me.container.children[2].style.left) + math.floor(5 / speed_current_month) + 'px';
speed_current_month += 0.01;
} else {
b_current_month = !b_current_month;
}
}
if(b_last_month && b_current_month) {
clearinterval(timer);
me.date = me.getfirstdateinmonth();
me.date = me.getcaldate(me.date, 'm', -1);
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.removechild(me.container.children[3]);
me.container.insertbefore(objcontent.lastmonth.component, me.container.children[0].nextsibling);
me.container.replacechild(objcontent.nextmonth.component, me.container.children[3]);
me.container.children[2].style.left = 0;
me.container.children[2].style.position = 'absolute';
me.container.children[3].style.left = '250px';
me.container.children[3].style.position = 'relative';
me.content.nextmonth = objcontent.nextmonth;
me.content.nextmonth.left = 250;
me.content.currentmonth = me.content.lastmonth;
me.content.currentmonth.left = 0;
me.content.lastmonth = objcontent.lastmonth;
me.content.lastmonth.left = -275;
me.header.children[2].innerhtml = me.formatdate(me.getfirstdateinmonth());
me[0].value = me.formatdate(me.getfirstdateinmonth());
}
}, 10);
}
setstyle(btnlastmonth, {
cursor: 'pointer',
height: '30px',
border: 0,
display: 'inline',
width: '30px',
position: 'absolute',
left: 0
});
var canvas_last_month = document.createelement('canvas');
if(canvas_last_month.getcontext('2d')) {
canvas_last_month.height = 30;
canvas_last_month.width = 30;
var ctx = canvas_last_month.getcontext('2d');
ctx.beginpath();
ctx.fillstyle = 'rgba(214,222,247,1)';
ctx.fillrect(0, 0, 30, 30);
ctx.strokestyle = 'rgba(251,251,251,1)';
ctx.fillstyle = 'rgba(251,251,251,1)';
ctx.linewidth = 1;
ctx.moveto(7, 0);
ctx.lineto(15, 0);
ctx.lineto(8, 15);
ctx.lineto(15, 30);
ctx.lineto(7, 30);
ctx.lineto(0, 15);
ctx.lineto(7, 0);
ctx.moveto(22, 0);
ctx.lineto(30, 0);
ctx.lineto(23, 15);
ctx.lineto(30, 30);
ctx.lineto(22, 30);
ctx.lineto(15, 15);
ctx.lineto(22, 0);
ctx.fill();
ctx.stroke();
btnlastmonth.appendchild(canvas_last_month);
} else {
btnlastmonth.innerhtml = "<<";
setstyle(btnlastmonth, {
backgroundcolor: 'rgba(214,222,247,1)'
});
}
var btnlastday = document.createelement('div');
btnlastday.title = "昨日";
btnlastday.onclick = function() {
if(me.getcaldate(me.date, 'd', -1).getmonth() + 1 == me.month) {
me.date = me.getcaldate(me.date, 'd', -1);
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.replacechild(objcontent.currentmonth.component, me.container.children[2]);
me.header.children[2].innerhtml = me.formatdate(me.date);
me[0].value = me.formatdate(me.date);
} else {
var speed_last_month = 1;
var speed_current_month = 1;
var b_last_month = false;
var b_current_month = false;
var next_month_left = parseint(me.content.nextmonth.component.style.left);
me.date = me.getcaldate(me.date, 'd', -1);
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.replacechild(objcontent.currentmonth.component, me.container.children[1]);
me.container.children[1].style.left = '-275px';
var timer = setinterval(function() {
if(!b_current_month) {
if(parseint(me.container.children[2].style.left) < next_month_left) {
me.container.children[2].style.left = parseint(me.container.children[2].style.left) + math.floor(5 / speed_current_month) + 'px';
speed_current_month += 0.01;
} else {
b_current_month = !b_current_month;
}
}
if(!b_last_month) {
if(parseint(me.container.children[1].style.left) < 0) {
me.container.children[1].style.left = parseint(me.container.children[1].style.left) + math.floor(5 / speed_last_month) + 'px';
speed_last_month += 0.01;
} else {
b_last_month = !b_last_month;
}
}
if(b_last_month && b_current_month) {
clearinterval(timer);
me.container.removechild(me.container.children[3]);
me.container.insertbefore(objcontent.lastmonth.component, me.container.children[0].nextsibling);
me.container.replacechild(objcontent.nextmonth.component, me.container.children[3]);
me.container.children[2].style.left = 0;
me.container.children[2].style.position = 'absolute';
me.container.children[3].style.left = '250px';
me.container.children[3].style.position = 'relative';
me.content.nextmonth = objcontent.nextmonth;
me.content.nextmonth.left = 250;
me.content.currentmonth = me.content.lastmonth;
me.content.currentmonth.left = 0;
me.content.lastmonth = objcontent.lastmonth;
me.content.lastmonth.left = -275;
me.header.children[2].innerhtml = me.formatdate(me.getfirstdateinmonth());
me[0].value = me.formatdate(me.getfirstdateinmonth());
}
}, 10);
}
}
setstyle(btnlastday, {
cursor: 'pointer',
height: '30px',
width: '30px',
display: 'inline',
position: 'absolute',
left: '31px'
});
var canvas_last_day = document.createelement('canvas');
if(canvas_last_day.getcontext('2d')) {
canvas_last_day.height = 30;
canvas_last_day.width = 30;
var ctx = canvas_last_day.getcontext('2d');
ctx.beginpath();
ctx.fillstyle = 'rgba(214,222,247,1)';
ctx.fillrect(0, 0, 30, 30);
ctx.strokestyle = 'rgba(251,251,251,1)';
ctx.fillstyle = 'rgba(251,251,251,1)';
ctx.linewidth = 1;
ctx.moveto(11, 0);
ctx.lineto(19, 0);
ctx.lineto(12, 15);
ctx.lineto(19, 30);
ctx.lineto(11, 30);
ctx.lineto(4, 15);
ctx.lineto(11, 0);
ctx.fill();
ctx.stroke();
btnlastday.appendchild(canvas_last_day);
} else {
btnlastday.innerhtml = "<";
setstyle(btnlastday, {
backgroundcolor: 'rgba(214,222,247,1)'
});
}
var spandt = document.createelement('div');
spandt.innerhtml = this.formatdate(this.date);
setstyle(spandt, {
position: 'absolute',
margin: '0 auto',
top: '5px',
right: 0,
bottom: 0,
left: 0,
width: '100px'
});
var btntomorrow = document.createelement('div');
btntomorrow.title = "明日";
btntomorrow.onclick = function() {
if(me.getcaldate(me.date, 'd', 1).getmonth() + 1 == me.month) {
me.date = me.getcaldate(me.date, 'd', 1);
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.replacechild(objcontent.currentmonth.component, me.container.children[2]);
me.container.children[2].style.left = 0;
me.header.children[2].innerhtml = me.formatdate(me.date);
me[0].value = me.formatdate(me.date);
} else {
var speed_next_month = 1;
var speed_current_month = 1;
var b_next_month = false;
var b_current_month = false;
var last_month_left = parseint(me.content.lastmonth.component.style.left);
me.date = me.getcaldate(me.date, 'd', 1);
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.replacechild(objcontent.currentmonth.component, me.container.children[3]);
me.container.children[3].style.left = '250px';
var timer = setinterval(function() {
if(!b_current_month) {
if(parseint(me.container.children[2].style.left) > last_month_left) {
me.container.children[2].style.left = parseint(me.container.children[2].style.left) - math.floor(5 / speed_current_month) + 'px';
speed_current_month += 0.01;
} else {
b_current_month = !b_current_month;
}
}
if(!b_next_month) {
if(parseint(me.container.children[3].style.left) > 0) {
me.container.children[3].style.left = parseint(me.container.children[3].style.left) - math.floor(5 / speed_next_month) + 'px';
speed_next_month += 0.01;
} else {
b_next_month = !b_next_month;
}
}
if(b_next_month && b_current_month) {
clearinterval(timer);
me.container.removechild(me.container.children[1]);
me.container.insertbefore(objcontent.nextmonth.component, me.container.children[2].nextsibling);
me.container.replacechild(objcontent.lastmonth.component, me.container.children[1]);
me.container.children[2].style.left = 0;
me.container.children[2].style.position = 'absolute';
me.container.children[3].style.left = '250px';
me.container.children[3].style.position = 'relative';
me.content.nextmonth = objcontent.nextmonth;
me.content.nextmonth.left = 250;
me.content.currentmonth = me.content.nextmonth;
me.content.currentmonth.left = 0;
me.content.lastmonth = objcontent.lastmonth;
me.content.lastmonth.left = -275;
me.header.children[2].innerhtml = me.formatdate(me.getfirstdateinmonth());
me[0].value = me.formatdate(me.getfirstdateinmonth());
}
}, 10);
}
}
setstyle(btntomorrow, {
cursor: 'pointer',
height: '30px',
width: '30px',
display: 'inline',
position: 'absolute',
right: '31px'
});
var canvas_tomorrow = document.createelement('canvas');
if(canvas_tomorrow.getcontext('2d')) {
canvas_tomorrow.height = 30;
canvas_tomorrow.width = 30;
var ctx = canvas_tomorrow.getcontext('2d');
ctx.beginpath();
ctx.fillstyle = 'rgba(214,222,247,1)';
ctx.fillrect(0, 0, 30, 30);
ctx.strokestyle = 'rgba(251,251,251,1)';
ctx.fillstyle = 'rgba(251,251,251,1)';
ctx.linewidth = 1;
ctx.moveto(11, 0);
ctx.lineto(19, 0);
ctx.lineto(26, 15);
ctx.lineto(19, 30);
ctx.lineto(11, 30);
ctx.lineto(18, 15);
ctx.lineto(11, 0);
ctx.fill();
ctx.stroke();
btntomorrow.appendchild(canvas_tomorrow);
} else {
btntomorrow.innerhtml = ">";
setstyle(btntomorrow, {
backgroundcolor: 'rgba(214,222,247,1)'
});
}
var btnnextmonth = document.createelement('div');
btnnextmonth.title = "下月";
btnnextmonth.onclick = function() {
var speed_next_month = 1;
var speed_current_month = 1;
var b_next_month = false;
var b_current_month = false;
var last_month_left = parseint(me.content.lastmonth.component.style.left);
var timer = setinterval(function() {
if(!b_next_month) {
if(parseint(me.container.children[3].style.left) > 0) {
me.container.children[3].style.left = parseint(me.container.children[3].style.left) - math.floor(5 / speed_next_month) + 'px';
speed_next_month += 0.01;
} else {
b_next_month = !b_next_month;
}
}
if(!b_current_month) {
if(parseint(me.container.children[2].style.left) > last_month_left) {
me.container.children[2].style.left = parseint(me.container.children[2].style.left) - math.floor(5 / speed_current_month) + 'px';
speed_current_month += 0.01;
} else {
b_current_month = !b_current_month;
}
}
if(b_next_month && b_current_month) {
clearinterval(timer);
me.date = me.getfirstdateinmonth();
me.date = me.getcaldate(me.date, 'm', 1);
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.removechild(me.container.children[1]);
me.container.insertbefore(objcontent.nextmonth.component, me.container.children[2].nextsibling);
me.container.replacechild(objcontent.lastmonth.component, me.container.children[1]);
me.container.children[1].style.left = '-275px';
me.container.children[1].style.position = 'absolute';
me.container.children[2].style.left = '0';
me.container.children[2].style.position = 'absolute';
me.content.lastmonth = objcontent.lastmonth;
me.content.lastmonth.left = -275;
me.content.currentmonth = me.content.nextmonth;
me.content.currentmonth.left = 0;
me.content.nextmonth = objcontent.nextmonth;
me.content.nextmonth.left = 250;
me.header.children[2].innerhtml = me.formatdate(me.getfirstdateinmonth());
me[0].value = me.formatdate(me.getfirstdateinmonth());
}
}, 10);
}
setstyle(btnnextmonth, {
cursor: 'pointer',
height: '30px',
border: 0,
display: 'inline',
width: '30px',
position: 'absolute',
right: 0
});
var canvas_next_month = document.createelement('canvas');
if(canvas_next_month.getcontext('2d')) {
canvas_next_month.height = 30;
canvas_next_month.width = 30;
var ctx = canvas_next_month.getcontext('2d');
ctx.beginpath();
ctx.fillstyle = 'rgba(214,222,247,1)';
ctx.fillrect(0, 0, 30, 30);
ctx.strokestyle = 'rgba(251,251,251,1)';
ctx.fillstyle = 'rgba(251,251,251,1)';
ctx.linewidth = 1;
ctx.moveto(0, 0);
ctx.lineto(8, 0);
ctx.lineto(15, 15);
ctx.lineto(8, 30);
ctx.lineto(0, 30);
ctx.lineto(7, 15);
ctx.lineto(0, 0);
ctx.moveto(15, 0);
ctx.lineto(23, 0);
ctx.lineto(30, 15);
ctx.lineto(23, 30);
ctx.lineto(15, 30);
ctx.lineto(22, 15);
ctx.lineto(15, 0);
ctx.fill();
ctx.stroke();
btnnextmonth.appendchild(canvas_next_month);
} else {
btnnextmonth.innerhtml = ">>";
setstyle(btnnextmonth, {
backgroundcolor: 'rgba(214,222,247,1)'
});
}
divheader.appendchild(btnlastmonth);
divheader.appendchild(btnlastday);
divheader.appendchild(spandt);
divheader.appendchild(btntomorrow);
divheader.appendchild(btnnextmonth);
return divheader;
}
function createcontent() {
var realdate = this.date;
var objcontent = {
lastmonth: {
scope: function() {
this.date = this.getfirstdateinmonth();
this.date = this.getcaldate(this.date, 'm', -1);
this.render({value: this.date});
},
current: true,
left: -275,
component: null
},
currentmonth: {
scope: function() {
if(this.initialize) {
this.date = realdate;
} else {
this.date = new date();
}
this.render({value: this.date});
},
current: true,
left: 0,
component: null
},
nextmonth: {
scope: function() {
this.date = this.getfirstdateinmonth();
this.date = this.getcaldate(this.date, 'm', 1);
this.render({value: this.date});
},
current: false,
left: 250,
component: null
}
};
for(var item in objcontent) {
objcontent[item].scope.call(this);
objcontent[item].year = this.year;
objcontent[item].month = this.month;
var divcontent = document.createelement('div');
setstyle(divcontent, {
height: '250px',
position: objcontent[item].current ? 'absolute' : 'relative',
left: objcontent[item].left + 'px'
});
var tbl = document.createelement('table'),
row_obj,
cell_obj,
row_num = tbl.rows.length,
cell_num = 0;
setstyle(tbl, {
width: '100%'
});
row_obj = tbl.insertrow(row_num);
setstyle(row_obj, {
backgroundcolor: 'rgba(214,222,247,1)'
});
row_obj.setattribute('head', true);
cell_obj = row_obj.insertcell(cell_num++);
cell_obj.innerhtml = "一";
cell_obj.style.width = "35px";
cell_obj = row_obj.insertcell(cell_num++);
cell_obj.innerhtml = "二";
cell_obj.style.width = "35px";
cell_obj = row_obj.insertcell(cell_num++);
cell_obj.innerhtml = "三";
cell_obj.style.width = "35px";
cell_obj = row_obj.insertcell(cell_num++);
cell_obj.innerhtml = "四";
cell_obj.style.width = "35px";
cell_obj = row_obj.insertcell(cell_num++);
cell_obj.innerhtml = "五";
cell_obj.style.width = "35px";
cell_obj = row_obj.insertcell(cell_num++);
cell_obj.innerhtml = "六";
cell_obj.style.width = "35px";
cell_obj = row_obj.insertcell(cell_num++);
cell_obj.innerhtml = "日";
cell_obj.style.width = "35px";
var dtfirst = this.getfirstdateinmonth();
var arydate = [];
var aryweekdate = new array(7);
for (var i = 0; i < this.count; i++) {
if (i == 0) {
aryweekdate = new array(7);
aryweekdate[(dtfirst.getday() == 0 ? 7 : dtfirst.getday()) - 1] = dtfirst;
var weeknumberforfirstday = dtfirst.getday() == 0 ? 7 : dtfirst.getday();
var d = 0;
while(weeknumberforfirstday > 1) {
aryweekdate[weeknumberforfirstday - 2] = this.getcaldate(dtfirst, 'd', -1 - d);
weeknumberforfirstday--;
d++;
}
if (dtfirst.getday() == 0) {
arydate.push(aryweekdate);
}
} else {
if (i == this.count - 1 && this.getcaldate(dtfirst, 'd', i).getday() != 0) {
var weeknumberfornextday = this.getcaldate(dtfirst, 'd', i).getday();
var n = 0;
if(weeknumberfornextday == 1){
aryweekdate = new array(7);
}
while(weeknumberfornextday < 8){
aryweekdate[weeknumberfornextday - 1] = this.getcaldate(dtfirst, 'd', i + n);
weeknumberfornextday++;
n++;
}
arydate.push(aryweekdate);
}
if (this.getcaldate(dtfirst, 'd', i).getday() == 1) {
aryweekdate = new array(7);
aryweekdate[0] = this.getcaldate(dtfirst, 'd', i);
} else if (this.getcaldate(dtfirst, 'd', i).getday() == 0) {
aryweekdate[6] = this.getcaldate(dtfirst, 'd', i);
arydate.push(aryweekdate);
} else {
aryweekdate[this.getcaldate(dtfirst, 'd', i).getday() - 1] = this.getcaldate(dtfirst, 'd', i);
}
}
}
for (var j = 0; j < arydate.length; j++) {
row_obj = tbl.insertrow(tbl.rows.length);
row_obj.style.height = '34px';
cell_num = 0;
for (var k = 0; k < arydate[j].length; k++) {
cell_obj = row_obj.insertcell(cell_num++);
cell_obj.innerhtml = arydate[j][k] != undefined ? arydate[j][k].getdate() : '';
cell_obj.style.width = "30px";
cell_obj.style.cursor = "default";
cell_obj.style.borderradius = '17px';
// set style for today
if(arydate[j][k] != undefined
&& this.month == new date().getmonth() + 1
&& this.year == new date().getfullyear()
&& arydate[j][k].getdate() == new date().getdate()) {
cell_obj.style.border = '1px solid silver';
}
// set style for days of other month
if(arydate[j][k] != undefined && this.month != arydate[j][k].getmonth() + 1) {
cell_obj.style.color = 'silver';
cell_obj.setattribute('no-current-month', true);
if(arydate[j][k].getfullyear() < this.year) {
cell_obj.setattribute('last-month', true);
} else if(arydate[j][k].getfullyear() == this.year) {
if(arydate[j][k].getmonth() + 1 < this.month) {
cell_obj.setattribute('last-month', true);
} else {
cell_obj.setattribute('next-month', true);
}
} else {
cell_obj.setattribute('next-month', true);
}
}
if(arydate[j][k] != undefined && this.year == arydate[j][k].getfullyear()
&& this.month == arydate[j][k].getmonth() + 1
&& this.day == arydate[j][k].getdate()) {
cell_obj.style.color = 'white';
cell_obj.style.backgroundcolor = 'rgba(245,169,244,1)';
cell_obj.setattribute('current-date', true);
}
cell_obj.onmouseover = function () {
this.style.backgroundcolor = 'rgba(245,169,244,1)';
this.style.color = 'white';
}
cell_obj.onmouseout = function () {
if(!this.getattribute('current-date')) {
this.style.backgroundcolor = "white";
this.style.color = 'black';
} else {
this.style.color = 'white';
}
if(this.getattribute('no-current-month')) {
this.style.color = 'silver';
}
}
}
}
var me = this;
tbl.onclick = function (e) {
var e = (e || event.srcelement).target;
if(e.tagname.tostring().tolowercase() == 'td' && !e.parentnode.getattribute('head')) {
if(!e.getattribute('no-current-month')) {
me.date = new date(me.date.getfullyear(), me.date.getmonth(), parseint(e.innerhtml));
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.replacechild(objcontent.currentmonth.component, me.container.children[2]);
me.header.children[2].innerhtml = me.formatdate(me.date);
me[0].value = me.formatdate(me.date);
} else {
if(e.getattribute('last-month')) {
var speed_last_month = 1;
var speed_current_month = 1;
var b_last_month = false;
var b_current_month = false;
var next_month_left = parseint(me.content.nextmonth.component.style.left);
if(me.date.getmonth() == 0) {
me.date = new date(me.date.getfullyear() - 1, 11, parseint(e.innerhtml));
} else {
me.date = new date(me.date.getfullyear(), me.date.getmonth() - 1, parseint(e.innerhtml));
}
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.replacechild(objcontent.currentmonth.component, me.container.children[1]);
me.container.children[1].style.left = '-275px';
var timer = setinterval(function() {
if(!b_current_month) {
if(parseint(me.container.children[2].style.left) < next_month_left) {
me.container.children[2].style.left = parseint(me.container.children[2].style.left) + math.floor(5 / speed_current_month) + 'px';
speed_current_month += 0.01;
} else {
b_current_month = !b_current_month;
}
}
if(!b_last_month) {
if(parseint(me.container.children[1].style.left) < 0) {
me.container.children[1].style.left = parseint(me.container.children[1].style.left) + math.floor(5 / speed_last_month) + 'px';
speed_last_month += 0.01;
} else {
b_last_month = !b_last_month;
}
}
if(b_last_month && b_current_month) {
clearinterval(timer);
me.container.removechild(me.container.children[3]);
me.container.insertbefore(objcontent.lastmonth.component, me.container.children[0].nextsibling);
me.container.replacechild(objcontent.nextmonth.component, me.container.children[3]);
me.container.children[2].style.left = 0;
me.container.children[2].style.position = 'absolute';
me.container.children[3].style.left = '250px';
me.container.children[3].style.position = 'relative';
me.content.nextmonth = objcontent.nextmonth;
me.content.nextmonth.left = 250;
me.content.currentmonth = me.content.lastmonth;
me.content.currentmonth.left = 0;
me.content.lastmonth = objcontent.lastmonth;
me.content.lastmonth.left = -275;
me.header.children[2].innerhtml = me.formatdate(me.getfirstdateinmonth());
me[0].value = me.formatdate(me.getfirstdateinmonth());
}
}, 10);
} else {
var speed_next_month = 1;
var speed_current_month = 1;
var b_next_month = false;
var b_current_month = false;
var last_month_left = parseint(me.content.lastmonth.component.style.left);
if(me.date.getmonth() == 11) {
me.date = new date(me.date.getfullyear() + 1, 0, parseint(e.innerhtml));
} else {
me.date = new date(me.date.getfullyear(), me.date.getmonth() + 1, parseint(e.innerhtml));
}
me.render({value: me.date});
var objcontent = createcontent.call(me);
me.container.replacechild(objcontent.currentmonth.component, me.container.children[3]);
me.container.children[3].style.left = '250px';
var timer = setinterval(function() {
if(!b_current_month) {
if(parseint(me.container.children[2].style.left) > last_month_left) {
me.container.children[2].style.left = parseint(me.container.children[2].style.left) - math.floor(5 / speed_current_month) + 'px';
speed_current_month += 0.01;
} else {
b_current_month = !b_current_month;
}
}
if(!b_next_month) {
if(parseint(me.container.children[3].style.left) > 0) {
me.container.children[3].style.left = parseint(me.container.children[3].style.left) - math.floor(5 / speed_next_month) + 'px';
speed_next_month += 0.01;
} else {
b_next_month = !b_next_month;
}
}
if(b_next_month && b_current_month) {
clearinterval(timer);
me.container.removechild(me.container.children[1]);
me.container.insertbefore(objcontent.nextmonth.component, me.container.children[2].nextsibling);
me.container.replacechild(objcontent.lastmonth.component, me.container.children[1]);
me.container.children[2].style.left = 0;
me.container.children[2].style.position = 'absolute';
me.container.children[3].style.left = '250px';
me.container.children[3].style.position = 'relative';
me.content.nextmonth = objcontent.nextmonth;
me.content.nextmonth.left = 250;
me.content.currentmonth = me.content.nextmonth;
me.content.currentmonth.left = 0;
me.content.lastmonth = objcontent.lastmonth;
me.content.lastmonth.left = -275;
me.header.children[2].innerhtml = me.formatdate(me.getfirstdateinmonth());
me[0].value = me.formatdate(me.getfirstdateinmonth());
}
}, 10);
}
}
}
}
divcontent.appendchild(tbl);
objcontent[item].component = divcontent;
}
// reset date to current month
this.date = realdate;
this.render({value: this.date});
return objcontent;
}
function createfooter() {
var me = this;
var divfooter = document.createelement('div');
setstyle(divfooter, {
height: '30px',
width: '100%',
position: 'absolute',
bottom: 0
});
var divcontainer = document.createelement('div');
setstyle(divcontainer, {
position: 'relative',
width: '95%',
height: '30px'
});
var btnclose= document.createelement('div');
setstyle(btnclose, {
position: 'absolute',
width: '100%',
top: 0,
right: 0,
bottom: '5px',
left: 0,
cursor: 'pointer',
border: '1px solid silver',
borderradius: '4px',
backgroundcolor: 'rgba(214,222,247,1)',
color: 'white',
margin: '0 5px'
});
btnclose.innerhtml = '关闭';
btnclose.onclick = function() {
setstyle(me.container, {
display: 'none'
});
}
divcontainer.appendchild(btnclose);
divfooter.appendchild(divcontainer);
return divfooter;
}
function createdatelist() {
this.container = document.createelement('div');
setstyle(this.container, {
position: 'relative',
margintop: '5px',
borderradius: '3px',
width: '250px',
height: '320px',
border: '1px solid silver',
//float: 'left',
textalign: 'center',
display: 'none',
overflow: 'hidden'
});
this.header = createheader.call(this);
this.content = createcontent.call(this);
this.footer = createfooter.call(this);
this.container.appendchild(this.header);
for(var item in this.content) {
this.container.appendchild(this.content[item].component);
}
this.initialize = true;
this.container.appendchild(this.footer);
insertafter(this[0], this.container);
}
dt.fn.choose = function (options) {
options = options || {};
var defaults = {
value: new date()
};
var opt = this.extend({}, defaults, options);
this.create(opt);
this[0].onfocus = function() {
this.parentnode.children[1].style.display = '';
}
}
var $ = function (selector) {
return dt(selector);
}
window.$ = $;
})()
window.onload = function () {
$('#txtdt').choose();
}
欢迎各位小伙伴批评指正！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。