想要实现的效果
实现思路
为了组件的可复用性，需要用面向对象的思想。
每个日历组件都是一个日历对象，主要包括日期选择框，日期控制显示栏，还有日历格子，为了保持日期控制显示栏和日历格子日期同步变化，日期控制栏和日历里面的每个格子都应该包含一个date属性，点击日历里的格子，将格子存的date属性作为函数参数，调用函数改变日期控制栏显示的时间。同理，日期控制栏时间变化时，也将date属性作为参数调用函数，函数重新绘制日历格子。
上码：
我要评论
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);
},
}
初始化日期控制栏：
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 ='<div class="year-input"><span>'+nowyear+'年</span><i class="select-year-btn"></i><ul class="year-select-box" style="display : none">';
for(var i=0;i<150;i++){
contentstr+='<li>'+(i+1900)+'年</li>';
}
contentstr+='</ul></div>'
+'<div class="month-input"><i class="prev-month"></i><select class="months-options">'
for(var i=0;i<12;i++){
contentstr+='<option>'+(i+1)+'月</option>';
}
contentstr+='</select><i class="next-month"></i></div>'
+'<div class="day-input"><i class="prev-day"></i><select class="days-options"></select>'
+'<i class="next-day"></i></div>'
+'<button class="today-btn">今天</button>'
+'<div class="days-title">';
var weekday = ['日', '一', '二', '三', '四', '五', '六'];
for (var i = 0; i < 7; i++) {
contentstr+='<span class="day-title">'+weekday[i]+'</span>';
}
contentstr+='</div>';
parentelement.innerhtml = contentstr;
this.changeshowdatebar(nowdate); //插入到showtimebar之后，初始化，传入的参数是现在的时间
var yearinput = parentelement.firstchild;
//年选择框点击显示和隐藏选择列表
yearinput.onclick = function(){ //target和this的区别 target是触发事件的元素，this是处理事件的元素
var ul = this.lastchild;
ul.style.display==='none'||ul.style.display==='none'? ul.style.display='inline-block':ul.style.display='none';
};
//为年选择下拉框绑定点击事件
var yearselectbox = yearinput.lastchild;
var yearli = yearselectbox.children;
for(var i=0;i<yearli.length;i++){
yearli[i].onclick = function(){
parent.showdatebar.date.setfullyear(this.innertext.slice(0,-1));
parent.changeshowdatebar(parent.showdatebar.date); //时间改变之后都要重新调用，因为不同年，不同月，某个月的天数不全一样
};
}
//为month的前后按钮添加点击事件
var monthinput = yearinput.nextsibling;
monthinput.firstchild.onclick = function(){
var monthoptions = this.nextsibling;
if(monthoptions.selectedindex>0){
parent.showdatebar.date.setmonth(--monthoptions.selectedindex);
}else{
monthoptions.selectedindex = 11;
parent.showdatebar.date.setfullyear(parent.showdatebar.date.getfullyear()-1);
parent.showdatebar.date.setmonth(11);
}
parent.changeshowdatebar(parent.showdatebar.date);
};
monthinput.lastchild.onclick = function(){
var monthoptions = this.previoussibling;
if(monthoptions.selectedindex<11){
parent.showdatebar.date.setmonth(++monthoptions.selectedindex);
}else{
monthoptions.selectedindex = 0;
parent.showdatebar.date.setfullyear(parent.showdatebar.date.getfullyear()+1);
parent.showdatebar.date.setmonth(0);
}
parent.changeshowdatebar(parent.showdatebar.date);
}
monthinput.children[1].onchange = function(){
parent.showdatebar.date.setmonth(this.selectedindex);
parent.changeshowdatebar(parent.showdatebar.date)
};
//为day的前后按钮添加点击事件
var dayinput = monthinput.nextsibling;
dayinput.firstchild.onclick = function(){
var dayoptions = this.nextsibling;
if(dayoptions.selectedindex>0){
parent.showdatebar.date.setdate(dayoptions.selectedindex--);
}else{
parent.showdatebar.date.setmonth(parent.showdatebar.date.getmonth()-1);
parent.showdatebar.date.setdate(parent.getdaysofmonth(parent.showdatebar.date));
}
parent.changeshowdatebar(parent.showdatebar.date);
};
dayinput.lastchild.onclick = function(){
var dayoptions = this.previoussibling;
if(dayoptions.selectedindex < dayoptions.length-1){
dayoptions.selectedindex++;
parent.showdatebar.date.setdate(dayoptions.selectedindex+1);
}else{
parent.showdatebar.date.setdate(1);
parent.showdatebar.date.setmonth(parent.showdatebar.date.getmonth()+1);
}
parent.changeshowdatebar(parent.showdatebar.date);
};
dayinput.children[1].onchange = function(){
parent.showdatebar.date.setdate(this.selectedindex+1);
parent.changeshowdatebar(parent.showdatebar.date)
};
//为今天按钮绑定点击事件
var todaybtn = dayinput.nextsibling;
todaybtn.onclick = function(){
parent.drawpicker(new date());
parent.changeshowdatebar(new date());
}
},
drawshowdatebar函数为日期控制栏的年份、月份、和天的点击按钮设置了点击事件处理函数。还有选择下拉框变化的处理函数。
在日期控制栏初始化时，或者改变showdatebar的date时，都会调用changeshowdatebar 函数。这个函数主要根据传入的日期改变日期控制栏“日”下拉栏的天数，因为每个月的天数不尽相同，所以要根据传入的日期来改变。会计算出传入的日期对应的月份有多少天，使用getdaysofmonth函数计算。
//计算一个月的天数
getdaysofmonth: function(primaldate) {
var date = new date(primaldate); //要新建一个对象，因为会改变date
var month = date.getmonth();
var time = date.gettime(); //计算思路主要是month+1,相减除一天的毫秒数
var newtime = date.setmonth(month + 1);
return math.ceil((newtime - time) / (24 * 60 * 60 * 1000));
},
changeshowdatebar : function(date){
var yearinput = this.showdatebar.firstchild;
var monthinput = yearinput.nextsibling;
var dayinput = monthinput.nextsibling;
yearinput.firstchild.innertext = date.getfullyear()+'年';
var monthsoptions = monthinput.firstchild.nextsibling;
monthsoptions.selectedindex = date.getmonth();
var daysoptions = dayinput.firstchild.nextsibling;
var days = this.getdaysofmonth(date);
var daystr = '';
for(var i=1;i<=days;i++){
daystr+='<option>'+i+'日</option>';
}
daysoptions.innerhtml = daystr;
// console.log(date.tolocaledatestring()+'changeshowdatebar');
daysoptions.selectedindex = date.getdate()-1;
this.drawpicker(date);
},
在日期控制栏的date变化后，日历格子的日期也应该要改变，显示的日期要和日期控制栏的保持一致。所以在changeshowdatebar函数结尾处调用drawpicker函数，重新绘制日历格子。
绘制日历格子的思路
drawpicker函数要根据传入的日期绘制日历格子。
drawpicker函数：
drawpicker: function(primaldate) {
var date = new date(primaldate); //要新建一个对象，因为会改变date
var nowmonth = date.getmonth()+1;
var nowdate = date.getdate();
var spancontainer = [];
var datebox = this.datebox;
datebox.innerhtml = '';
var time = date.gettime();
var days = this.getdaysofmonth(date); //计算出这个月的天数
date.setdate(1); //将date的日期设置为1号
var firstday = date.getday(); //知道这个月1号是星期几
for (var i = 0; i < firstday; i++) { //如果1号不是周日(一周的开头),则在1号之前要补全
var tempdate = new date(date);
tempdate.setdate(i - firstday + 1);
var span = document.createelement("span");
span.classname = "unshow";
spancontainer.push({span : span, date : tempdate});
}
for (var i = 1; i <= days; i++) { //1号到这个月最后1天
var span = document.createelement("span");
span.classname = 'show';
spancontainer.push({span : span, date : new date(date)});
date.setdate(i + 1);
}
for (var i = date.getday(); i <= 6; i++) { //在这个月最后一天后面补全
var span = document.createelement("span");
span.classname = "unshow";
spancontainer.push({span : span, date : new date(date)});
date.setdate(date.getdate()+1);
}
for(var i=0;i<spancontainer.length;i++){
var spanbox = spancontainer[i];
var span = spanbox.span;
span.year = spanbox.date.getfullyear(); //为每个span元素添加表示时间的属性
span.month = spanbox.date.getmonth() + 1;
span.date = spanbox.date.getdate();
span.innertext = spanbox.date.getdate();
if(span.date === nowdate&&span.month === nowmonth) //如果这个span的日期为与传入的日期匹配，设置类名为select
span.classname+=" select";
var parent = this;
span.onclick = function(){ //设置点击事件
var target = event.target;
var selected = target.parentelement.getelementsbyclassname("select");
for(var i=0 ;i<selected.length;i++){
selected[i].classname = selected[i].classname.replace(" select","");
};
target.classname+=" select";
parent.changedate(target.year, target.month, target.date);
parent.changeshowdatebar(new date(target.year, target.month-1, target.date));
};
datebox.appendchild(span); //将span添加到datebox中
}
this.changedate(primaldate.getfullyear(), primaldate.getmonth()+1, primaldate.getdate())
return;
},
//日期框点击时显示日历
ondateinputclick: function(event) {
var target = event.target;
var value = target.value;
var datepicker = this.datepicker;
if(datepicker.style.display==='none'){ //这里必须要在js文件里将datepicker.style.display设置为none，如果是在css文件里设置为none,得到的display为""
datepicker.style.display = 'block';
}else{
datepicker.style.display = 'none';
return;
}
if (!value) this.drawshowdatebar(this.showdatebar); //绘制日历的显示栏
},
changedate : function(year, month, date){
this.dateinput.value = year+"-"+(month<10?("0"+month):month)+"-"+(date<10?("0"+date):date);
},
实现效果
有点丑......
实现中遇到的问题
用到的date api
项目源码 https://github.com/wenkeshi/js-calendar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
bootstrap-closable-tab可实现关闭的tab标签页插件
vue-cli单页面预渲染seo-prerender-spa-plugin操作
网友评论