首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
laypage分页控件使用实例详解
May 19 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
VUE接入腾讯验证码功能（滑块验证）备忘
May 07 Javascript
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
RP2100(1) ICF-SW7600(1) PL450(1) 德劲1102(1) 低放电路(1) GF515(1) SRF-M100(1) SHARP(1) 乐信(1) PL550(1)
You might like
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
微信小程序实现登录遮罩效果
2018/11/01 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Python实现SMTP邮件发送
2020/06/16 Python
国外的一些J2EE面试题一
2012/10/13 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
社会实践自我鉴定
2013/11/07 职场文书
中学自我评价
2014/01/31 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2014年度个人总结范文
2015/03/09 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书