原生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(); }
欢迎各位小伙伴批评指正!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。