在日期控制栏初始化时，或者改变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函数要根据传入的日期绘制日历格子。
首先计算传入的日期月份的天数
计算这个月1号是周几 。利用Date对象的date.setDate(1) //将天设置为1号 。date.getDay() //得到这天是周几
如果1号不是周日，则补全周日到1号的天数。可以利用oldDate.setDate(-1) //设置日期为原来日期的上个月的最后一天。注意setDate是会改变当前日期的，并不是返回新的日期。
从1号到这个月最后一天循环。
补全最后一天到周六的天数
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; },