(function(){
//?將全局變量的值賦給局部變量
var?datepicker=window.datepicker;
var?monthData;
var?$wrapper;
//渲染函數
//一般來說，你在業務中碰到這樣的請求,需要將一個數據渲染到一個結構中,我們會使用一個模板引擎，但是這里沒有依賴任何第三方的模板引擎,所以使用最原始的拼接字符串的方式
datepicker.buildUi=function(year,month){
monthData=datepicker.getMonthData(year,month);
var?html='<div?class="ui-datepicker-header">'+
'<a?href=""?class="ui-datepicker-btn?ui-datepicker-prev-btn">&lt;</a>'+
'<a?href=""?class="ui-datepicker-btn?ui-datepicker-next-btn">&gt;</a>'+
'<span?class="ui-datepicker-curr-month">'+monthData.year+'-'+monthData.month+'</span>'+
'</div>'+
'<div?class="ui-datepicker-body">'+
'<table>'+
'<thead>'+
'<tr>'+
'<th>一</th>'+
'<th>二</th>'+
'<th>三</th>'+
'<th>四</th>'+
'<th>五</th>'+
'<th>六</th>'+
'<th>日</th>'+
'</tr>'+
'</thead>'+
'<tbody>';
for(var?i=0;i<monthData.days.length;i++){
var?date=monthData.days[i];
//表示每周的第一天
if(i%7===0){
html+='<tr>';
}
html+='<td>'+date.showDate+'</td>';
//表示每周的最后一天
if(i%7===6){
html+='</tr>';
}
}
html+='</tbody>'+
'</table>'+
'</div>';
return?html;
};
//?渲染
datepicker.render=function(direction){
var?year,month;
if(monthData){
year=monthData.year;
month=monthData.month;
}
if(direction==='prev')?month--;
if(direction==='next')?month++;
var?html=datepicker.buildUi(year,month);
$wrapper=document.querySelector('.ui-datepicker-wrapper');
//創建包裹層
if(!$wrapper){
$wrapper=document.createElement('div');
document.body.appendChild($wrapper);
$wrapper.className='ui-datepicker-wrapper';
}
$wrapper.innerHTML=html;
};
//為了后面的擴展,不直接將它放入結構中
datepicker.init=function(input){
datepicker.render();
var?$input?=document.querySelector(input);
var?isOpen=false;
$input.addEventListener('click',function(){
if(isOpen){
$wrapper.classList.remove('ui-datepicker-wrapper-show');
isOpen=false;
}
else{
$wrapper.classList.add('ui-datepicker-wrapper-show');
//為什么要在點開datepicker之前做一個運算呢,而不是在初始化的時候直接算好給它賦樣式呢
//這是因為頁面的結構隨時可能變動,比如說用戶的業務發生了一些狀態的變更,導致業務的元素增加或者減少,導致在初始化的時候直接算好的位置在彈出datepicker時,已經發生了改變，所以一般在彈出之前計算位置，這樣比較準確一些
var?left=$input.offsetLeft;
var?top=$input.offsetTop;
var?height=$input.offsetHeight;
$wrapper.style.top=top+height+2+'px';
$wrapper.style.left=left+'px';
isOpen=true;
}
},false);
$wrapper.addEventListener('click',function(e){
var?$target=e.target;
if(!$target.classList.contains('ui-datepicker-btn'))
return;
//上一月
if($target.classList.contains('ui-datepicker-prev-btn')){
datepicker.render('prev');
}
//下一個月
else?if($target.classList.contains('ui-datepicker-next-btn')){
datepicker.render('next');
}
},false);
};
})();