想要实现的效果
- 点击日期选择框出现日历
- 有个日期控制栏帮助选择日期， 包括年、月、日的选择和今天
- 日历格子，初次点击日期选择框时显示此刻的日期，日历格子的日期应该包括这个月的所有天数，同时如果当月的1号不是周日，还应补全从周日到1号的天数。还要在这个月最后1号的后面补全到周六。
- 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的。
实现思路
为了组件的可复用性，需要用面向对象的思想。
每个日历组件都是一个日历对象，主要包括日期选择框，日期控制显示栏，还有日历格子，为了保持日期控制显示栏和日历格子日期同步变化，日期控制栏和日历里面的每个格子都应该包含一个Date属性，点击日历里的格子，将格子存的Date属性作为函数参数，调用函数改变日期控制栏显示的时间。同理，日期控制栏时间变化时，也将Date属性作为参数调用函数，函数重新绘制日历格子。
上码：
文字被选中的蓝色块
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);
},}
初始化日期控制栏：
内容拼接
var contentStr ='
'+nowYear+'年
'
+'- Box" style="display : none">';
for(var i=0;i<150;i++){
contentStr+='
- '+(i+1900)+'年 '; } contentStr+='
'
+''
+'
drawShowDateBar函数为日期控制栏的年份、月份、和天的点击按钮设置了点击事件处理函数。还有选择下拉框变化的处理函数。
在日期控制栏初始化时，或者改变showDateBar的Date时，都会调用changeShowDateBar 函数。这个函数主要根据传入的日期改变日期控制栏“日”下拉栏的天数，因为每个月的天数不尽相同，所以要根据传入的日期来改变。会计算出传入的日期对应的月份有多少天，使用getDaysOfMonth函数计算。
';
}
daysOptions.innerHTML = dayStr;
// console.log(date.toLocaleDateString()+'changeShowDateBar');
daysOptions.selectedIndex = date.getDate()-1;
this.drawPicker(date);
},
在日期控制栏的Date变化后，日历格子的日期也应该要改变，显示的日期要和日期控制栏的保持一致。所以在changeShowDateBar函数结尾处调用drawPicker函数，重新绘制日历格子。
绘制日历格子的思路
drawPicker函数要根据传入的日期绘制日历格子。
- 首先计算传入的日期月份的天数
- 计算这个月1号是周几 。利用Date对象的date.setDate(1) //将天设置为1号 。date.getDay() //得到这天是周几
- 如果1号不是周日，则补全周日到1号的天数。可以利用oldDate.setDate(-1) //设置日期为原来日期的上个月的最后一天。注意setDate是会改变当前日期的，并不是返回新的日期。
- 从1号到这个月最后一天循环。
- 补全最后一天到周六的天数
drawPicker函数：
Box = 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;iBox = 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 ;iBox.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);
},
实现效果
有点丑......
实现中遇到的问题
- 日历格子的绘制问题 。要补全1号前面到周日的天数，还要补全当月最后1号到周六的天数。日历格子的绘制可以分为3部分，当月前面、当月和当月后面的。要计算出1号是周几，然后将这周周日到1号的天数绘制。
- 当月的日历从1号到最后1号循环绘制。补全最后1号到周六的天数(date.getDay()<=6)
- 日历格子和日期控制栏显示的同步。在绘制时为每个日历格子单元保存其代表的Date。点击格子单元时，调用changeShowDateBar函数，将单元存的Date传入，改变日期控制栏显示的日期，然后重绘日历格子。
- 每个月天数不同，出现的“日”选择框天数不同的问题。在changeShowDateBar函数里会根据传入的Date，计算当月有多少天，然后动态生成“日”选择框应有的天数。
- 跨月，跨年的处理。在日期控制栏中，有月份和日的上下按钮，在处理跨月和跨年时，判断这月(日)是否为最后一月(日)，若为，则日期控制栏的Date的年(月)加1，将显示的月(日)设为第一月(日)，调用changeShowDateBar函数。同理判断是否为第一月(日)。
用到的Date API
- date.getFullYear() //得到date的年份
- date.getMonth() //得到月份 0-11
- date.getDate() //得到日期 1-31的数字
- date.getDay() // 得到这天是周几 0-6
- date.getTime()// 得到date的时间戳 ms表示
- date.setFullYear(2017); // 设置年份
- date.setMonth(x) // 如果设置为0-11，则date为x年的1-12月，如果比11大，则会往前面推，会跳到x+([(n+1)/12])年的第（n+1）%12个月
- 如果为负数，例如-1则会调到上一年的最后一月去。
- date.setDate(x) // 和setMonth是同理的，它会自动根据当月的天数，判断是否发生月份的变动。-1代表date跳到上月的最后一天
- date.setTime()// 根据时间戳设置date
