這篇文章是我看了慕課網(wǎng)的datePicker組件開發(fā)課程寫的讹堤，其中加了一些自己的思考和總結(jié)，具體源碼大家可以參考慕課網(wǎng)相關(guān)代碼宝泵。
1好啰，實現(xiàn)的效果
2，基礎(chǔ)知識點
JavaScript Date（日期）對象 實例
-
返回當日的日期和時間
var today = new Date(); -
從 Date 對象返回一個月中的某一天 (1 ~ 31)
today.getDate() -
從 Date 對象返回一周中的某一天 (0 ~ 6)儿奶；注意：星期天是0
today.getDay() -
從 Date 對象以四位數(shù)字返回年份
today.getFullYear() -
從 Date 對象返回月份 (0 ~ 11)
today.getMonth() -
返回 Date 對象的小時 (0 ~ 23)
today.getHours() -
返回 Date 對象的分鐘 (0 ~ 59)框往。
today.getMinutes() -
返回 1970 年 1 月 1 日至今的毫秒數(shù)。
today.getTime() -
返回某一個日期的
Date對象// 比如我要拿到5月27號的Date對象 var aDay = new Date('2018-05-27') 或者 var aDay = new Date(2018,4,27) // 月份是從0開始的
更多可以參考JavaScript Date 對象;
?
3闯捎，頁面結(jié)構(gòu)
這里我們就不細講了椰弊，我們會在第五節(jié)講動態(tài)渲染日歷數(shù)據(jù)。
4瓤鼻，獲取日歷每月顯示的數(shù)據(jù)
首先我們要實現(xiàn)一個函數(shù)秉版，這個函數(shù)的作用就是拿到我們這個 datePicker 需要渲染的數(shù)據(jù)。
我們實現(xiàn)的六行七列的數(shù)據(jù)茬祷，如下圖：
我們首先創(chuàng)建一個 data.js 清焕，同時在里面定義一個 getMonthDate 的方法，在 ret 存入我們所要渲染的天數(shù)祭犯。
(function(){
var datepicker = {};
datepicker.getMonthDate = function(year ,month){
var ret = [];
return {
days:ret
};
}
window.datepicker = datepicker;
})();
這個函數(shù)需要接受的參數(shù)是年份與月份秸妥，如果不傳的話，則默認傳入當前的月份與年份沃粗。
如下：
if(!year&&!month){
var today = new Date(); // 獲取當天日期對象
year = today.getFullYear(); // 獲取當前年份
month = today.getMonth() + 1; // 獲取當前月份
}
這里面還有一個比較重要的點就是粥惧，就是我們怎么顯示上一個月的值，以及他們分別是幾號陪每。
這里我們只要獲取到這個月第一天是星期幾就可以了影晓，然后前面的就是相應顯示上個月的值镰吵。
var firstDay = new Date(year ,month-1, 1); // 這個月第一天的Date對象
var firstDayWeekDay = firstDay.getDay(); // 那個這個月第一天具體是星期幾
if(firstDayWeekDay === 0)firstDayWeekDay = 7; // 0的話就是星期天
year = firstDay.getFullYear(); // 拿到當前的年份
month = firstDay.getMonth() + 1; // 拿到當前的月份
我們還需要拿到上個月和這個月的最后一天，便于我們稍后組裝數(shù)據(jù)挂签。我們可以用這個月的第0天得到上個月的最后一天疤祭。
var lastDayofLastMonth = new Date(year,month-1,0); // 上個月的最后一天
var lastDateofLastMonth = lastDayofLastMonth.getDate();
// 上個月的具體日期
var preMonthDayCount = firstDayWeekDay-1; // 上個月在第一行要顯示幾天
var lastDay = new Date(year,month,0); // 這個月的最后一天
var lastData = lastDay.getDate(); // 這個月的最后一天具體日期
接下去我們就需要去拼裝數(shù)據(jù)了。
遍歷數(shù)據(jù)：
數(shù)據(jù)結(jié)構(gòu)的圖我剛剛已經(jīng)發(fā)過了饵婆，我們這邊需要循環(huán)遍歷這六行七列的42個數(shù)據(jù)勺馆，而且每一個數(shù)據(jù)包括
{
date : 代表我們時當月的第幾天，其實是一個中介侨核，為了計算showDate
month : 代表我們是第幾個月
showDate : 代表我們當前天數(shù)是確切的第幾天
}
遍歷的代碼如下：
for (var i = 0;i<6*7;i++){
var date = i+1-preMonthDayCount; // 賦值date的值草穆，這里上個月的最后一天為0
var showDate = date; // 賦值showDate，上下月份搓译，下面再做判斷
var thisMonth = month; // 賦值月份
if (date <= 0){ // 當date < 0時悲柱，則代表是上一個月
thisMonth = month-1; // 月份減一
showDate = lastDateofLastMonth + date; // 顯示上一個相應是幾號
} else if (date > lastData){ // 當date大于了這個月最后一天，那么代表下個月
thisMonth = month+1; // 月份加一
showDate = showDate - lastData; // 顯示下一個月具體幾號
}
if(thisMonth === 13) thisMonth = 1;
// 當我們月份是13的時候些己，代表下一年豌鸡，月份置為一
if(thisMonth === 0)thisMonth = 12;
// 當我們月份是0的時候，代表上一年段标，月份置為一
ret.push({
date:date,
month:thisMonth,
showDate:showDate
}); // 最后塞入到我們的ret中去
}
經(jīng)過以上代碼的處理涯冠，我們便能得到最初圖中所示的數(shù)據(jù)了。
5逼庞，開始動態(tài)渲染數(shù)據(jù)
我們在建一個 datePicker.js 蛇更，我們在這個 js 中做一些頁面渲染的工作。
首先我們要來思考一下我們要做一些什么工作赛糟，一般在下手開始敲代碼之前派任，我們先要想好思路，然后在開始工作璧南。
最開始吨瞎，我們肯定要獲取到日歷數(shù)據(jù)，然后將數(shù)據(jù)動態(tài)填充到我們準備好的模版里面去穆咐。
然后我們要實現(xiàn)一些事件颤诀，改變月份，然后進行相應的的月份數(shù)據(jù)对湃；點擊相應的天數(shù)崖叫，使日歷組件消失，input框中顯示選擇的天數(shù)拍柒。
這樣我們可以寫一個代碼的大致框架出來：
(function(){
var datepicker = window.datepicker;
datepicker.buildUI = function(year ,month){ // 日歷組件的函數(shù)
var html = datepicker.buildUI(year,month);
return html;
};
datepicker.render = function(direction){ // 頁面的render函數(shù)
var year,month;
var html = datepicker.buildUI(year,month);
$wrapper = document.querySelector('.ui-datePicker-wrapper');
$wrapper.innerHTML = html;
}
datepicker.init = function(input){ // 頁面的入口函數(shù)
datepicker.render();
}
function format(date){ // 一個工具函數(shù)心傀，將Date對象轉(zhuǎn)化成YYYY-MM-DD的格式
var ret = '';
var padding = function(num){
if(num <= 9){
return '0' + num;
}else{
return num;
}
}
ret += date.getFullYear() + '-';
ret += padding(date.getMonth() + 1) + '-';
ret += padding(date.getDate());
return ret;
}
})();
然后我們在 init 函數(shù)中添加一些事件函數(shù)，如下圖：
接下來我們主要看看 buildUI 的函數(shù)實現(xiàn)拆讯，這里其實就是實現(xiàn)一個動態(tài)的html脂男，然后渲染到頁面中而已养叛，就跟我們平時從 Ajax 渲染數(shù)據(jù)一樣。
最后我們看看index.html的文件內(nèi)容怎么樣宰翅，如下圖：
頁面引入兩個js弃甥，并向外暴露一個變量對象 datepicker ，然后調(diào)用相應的 init 方法汁讼。
6淆攻，總結(jié)
至此我們便完成了一個簡單的用原生js完成的一個最最基礎(chǔ)的日歷組件，其中里面最主要的就是獲取日期數(shù)據(jù)的這個函數(shù)嘿架，實現(xiàn)的思路其實也很常規(guī)瓶珊，其他的關(guān)于渲染的流程，其實我們平時工作中也會經(jīng)常碰到耸彪。
