原生JS实现日历组件的示例代码

  更新时间：2017年09月22日 09:31:38 作者：softbone

  本篇文章主要介绍了原生JS实现日历组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  想要实现的效果

  实现思路

  为了组件的可复用性，需要用面向对象的思想。

  每个日历组件都是一个日历对象，主要包括日期选择框，日期控制显示栏，还有日历格子，为了保持日期控制显示栏和日历格子日期同步变化js原生代码，日期控制栏和日历里面的每个格子都应该包含一个Date属性，点击日历里的格子，将格子存的Date属性作为函数参数，调用函数改变日期控制栏显示的时间。同理，日期控制栏时间变化时，也将Date属性作为参数调用函数，函数重新绘制日历格子。

  上码：

  <pre class="brush:js;">
function Calendar(parentId) {
this.parentElement = document.getElementById(parentId);
this.init();
}
Calendar.prototype = {
init: function() {

this.contains = document.createElement("div");
this.contains.onselectstart = function(){return false};  //让按钮点击时不会出现文字被选中的蓝色块
this.dateInput = document.createElement("input");
this.datePicker = document.createElement("div");
this.showDateBar = document.createElement("div");
this.dateBox = document.createElement("div");
this.icon = document.createElement("i");
this.contains.className = 'datepicker-container';
this.dateInput.className = 'date-input';
this.dateInput.readOnly = true;
var parent = this;
this.dateInput.onclick = function(event){
  parent.onDateInputClick(event);      //点击日期选择框时显示日历格子        
};
this.contains.onblur = function(){
  parent.datePicker.style.display = 'none';
}
this.datePicker.className = 'date-picker';
this.datePicker.style.display = 'none';
this.showDateBar.className = 'show-date';
this.dateBox.className = 'date-box';
this.icon.className = 'date-icon';
this.icon.innerHTML = ''; //iconfont这里用的阿里图标，可以自行替换
this.datePicker.appendChild(this.showDateBar);
this.datePicker.appendChild(this.dateBox);
this.contains.appendChild(this.dateInput);
this.contains.appendChild(this.icon);
this.contains.appendChild(this.datePicker);
this.parentElement.appendChild(this.contains); 

},
}
</pre>

  初始化日期控制栏：

<p><pre class="brush:js;">
drawShowDateBar: function(parentElement){

var parent = this;
var nowDate = new Date();
parentElement.date = nowDate;
var nowYear = nowDate.getFullYear();
var nowMonth = nowDate.getMonth();
var nowDay = nowDate.getDate();
//showDateBar内容拼接
var contentStr =''+nowYear+'年';
for(var i=0;i