编程 Javascript

原生js实现日期选择插件

Posted in Javascript onMay 21, 2020

最近公司项目告一段落，想着写个小玩意打发下上班时间，就用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();
 }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

原生js实现日期选择插件

- Author -

Yirujet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

详解springmvc 接收json对象的两种方式

Dec 06 Javascript

jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法

May 20 jQuery

AngularJS中filter的使用实例详解

Aug 25 Javascript

React中常见的动画实现的几种方式

Jan 10 Javascript

详解vue 单页应用（spa）前端路由实现原理

Apr 04 Javascript

JavaScript中toLocaleString()和toString()的区别实例分析

Aug 14 Javascript

GOJS+VUE实现流程图效果

Dec 01 Javascript

JQuery Ajax执行跨域请求数据的解决方案

Dec 10 jQuery

js中Generator函数的深入讲解

Apr 07 Javascript

ES6中字符串的使用方法扩展

Jun 04 Javascript

vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

Apr 28 Javascript

vue实现一个获取按键展示快捷键效果的Input组件

Jan 13 Vue.js

vue+Element中table表格实现可编辑（select下拉框）

May 21 #Javascript

浅谈React中组件逻辑复用的那些事儿

May 21 #Javascript

记一次用ts+vuecli4重构项目的实现

May 21 #Javascript

JS实现图片幻灯片效果代码实例

May 21 #Javascript

Javascript实现秒表计时游戏

May 27 #Javascript

JavaScript实现猜数字游戏

May 20 #Javascript

Vue 打包体积优化方案小结

May 20 #Javascript