首页
所有分类
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 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
js特殊字符转义介绍
Nov 05 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
Node.js的特点详解
Feb 03 Javascript
js实现3d悬浮效果
Feb 16 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 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
相对定位(1) 游标(1) props(1) ip连接(1) ECharts(3) mixin(1) 绝对定位(1) ref(1) GTID(1) postcss-px2rem(1)
You might like
Terran兵种对照表
2020/03/14 星际争霸
php中socket的用法详解
2014/10/24 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
django2笔记之路由path语法的实现
2019/07/17 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
英国知名衬衫品牌美国网站：Charles Tyrwhitt美国
2016/08/28 全球购物
Gap加拿大官网：Gap Canada
2017/08/24 全球购物
求职信模板标准格式范文
2014/02/23 职场文书
同居协议书范本
2014/04/23 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
审计班子对照检查材料
2014/08/27 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis