欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js实现日期选择插件

程序员文章站 2022-03-21 12:45:42
最近公司项目告一段落,想着写个小玩意打发下上班时间,就用js很粗糙的实现了下日期选择插件。间间断断历时1天多,实现了选择日期的功能,从写完的整体代码来看,耦合度还是蛮高的,我觉得还是我对js中的原型继...

最近公司项目告一段落,想着写个小玩意打发下上班时间,就用js很粗糙的实现了下日期选择插件。间间断断历时1天多,实现了选择日期的功能,从写完的整体代码来看,耦合度还是蛮高的,我觉得还是我对js中的原型继承方式理解不深刻,一定有更优雅的方式再优化下这份粗糙的代码,各位前端小伙伴们在看完我的代码后请麻烦指出其中实现的不好的地方,有批评指正让我有动力继续写博客嘛!

先说下这个插件的功能:功能很简单,目前只实现了选择一个日期(当然可以赋初始值,默认是当前日期),选择跨月日期时,会有一个粗糙的动画效果,效果图如下:

原生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();
 }

欢迎各位小伙伴批评指正!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。