百度前端技術(shù)學(xué)院上有一個(gè)任務(wù)硼被，要實(shí)現(xiàn)一個(gè)日期選擇組件允粤，本文由此而來~
- 看看需求
- 組件默認(rèn)一直呈顯示狀態(tài)
- 通過某種方式選擇年暖庄、月，選擇了年月后祥楣，日期列表做相應(yīng)切換
- 通過單擊某個(gè)具體的日期進(jìn)行日期選擇
- 組件初始化時(shí)开财，可配置可選日期的上下限∥笸剩可選日期和不可選日期需要有樣式上的區(qū)別
- 提供設(shè)定日期的接口床未，指定具體日期，日歷面板相應(yīng)日期選中
- 日期選擇面板默認(rèn)隱藏振坚，會(huì)顯示一個(gè)日期顯示框和一個(gè)按鈕，點(diǎn)擊這兩個(gè)部分斋扰，會(huì)浮出日歷面板渡八。再點(diǎn)擊則隱藏。
- 點(diǎn)擊選擇具體日期后传货，面板隱藏屎鳍，日期顯示框中顯示選取的日期
- 增加一個(gè)接口，用于當(dāng)用戶選擇日期后的回調(diào)處理
- 增加一個(gè)參數(shù)及相應(yīng)接口方法问裕，來決定這個(gè)日歷組件是選擇具體某天日期逮壁，還是選擇一個(gè)時(shí)間段
- 當(dāng)設(shè)置為選擇時(shí)間段時(shí)，需要在日歷面板上點(diǎn)擊兩個(gè)日期來完成一次選擇粮宛，兩個(gè)日期中窥淆，較早的為起始時(shí)間，較晚的為結(jié)束時(shí)間巍杈，選擇的時(shí)間段用特殊樣式標(biāo)示
- 增加參數(shù)及響應(yīng)接口方法忧饭，允許設(shè)置時(shí)間段選擇的最小或最大跨度，并提供當(dāng)不滿足跨度設(shè)置時(shí)的默認(rèn)處理及回調(diào)函數(shù)接口
- 在彈出的日期段選擇面板中增加確認(rèn)和取消按鈕
先完成一個(gè)組件的基本結(jié)構(gòu)
(function(window,document){
function Calendar(options){
//傳入配置的中的參數(shù)
this.init();
}
Calendar.prototype={
init:function(){
this.createDom();
this.loadCss();
this.cacheDom();
this.bindEvents();
this.render();
},
loadCss:function(){
// 把組件所需的樣式表動(dòng)態(tài)加載進(jìn)來
},
createDom:function(){
// 創(chuàng)建dom對(duì)象或者創(chuàng)建html片段或者創(chuàng)建template
},
cacheDom:function(){
// 存儲(chǔ)dom 對(duì)象
},
bindEvents:function(){
//事件綁定
},
render:function(){
//渲染函數(shù)筷畦，更新數(shù)據(jù)或樣式
}
}
window.Calendar=Calendar;//把組件對(duì)象綁定到全局
}(window,document));
通常我寫組件時(shí)的基本結(jié)構(gòu)如上词裤，你可以根據(jù)組件的需要或者自己習(xí)慣進(jìn)行編寫。然后就可以在html里面添加以下的代碼就可以調(diào)用我們的組件了鳖宾，
<script src='calendar.js></script>
<script type='text/javascript'>
var a=new Calendar({
// 各種配置
/* 類似于 id:'myCalendar'
onSelected:function(){
alert('hello');
}
*/
});
</script>
下面再看一下我們的需求吼砂，我們來一 一分析
需求也不是很多嘛，手動(dòng)斜眼~
先上圖鼎文，根據(jù)圖再慢慢分析
其實(shí)我們看了需求之后渔肩，每個(gè)人都會(huì)有一個(gè)大概的思路，下面說一下我的思路
首先拇惋，要實(shí)現(xiàn)一個(gè)日期選擇器赖瞒，最重要的就是要有一個(gè)日歷女揭，根據(jù)不同的年份和月份，日期面板上回顯示每一天和對(duì)應(yīng)的周幾~
其實(shí)實(shí)現(xiàn)這一點(diǎn)的話就兩點(diǎn)
- 第一栏饮，要根據(jù)年份和月份算出每月有多少天
- 第二吧兔，要計(jì)算出每月的第一天（1號(hào)）是周幾
偽代碼如下：
/**
* @param {string} year 年份
* @param {string} month 月份
* @param {string} day 號(hào)
* @return {object} message
* message{
* year 年份
* month 月份
* monthLen 那個(gè)月的天數(shù)
* whichDay 1號(hào)是周幾
* day 號(hào)
* }
*/
function calculate(year,month,day){
var date=year+'/'+month+'/'+'1';
var whichDay=new Date(date).getDay();
var message={
year:year,
month:month,
monthLen:new Date(year,month,0).getDate(),
whichDay:whichDay,
day:day
};
return message;
},
我想看完代碼之后大家應(yīng)該比較疑惑的是獲取每個(gè)月天數(shù)的那句代碼,這個(gè)比較優(yōu)雅的做法是從這里看到的，
注意：在Date對(duì)象里month為0代表的是1月份袍嬉，month為5代表6月份境蔼，所以我new Date(year,5,0)代表的六月份的第0天，即5月份的最后一天伺通，所以還可以用getDate()獲取5月份的長(zhǎng)度,getDate方法是返回指定日期對(duì)象的月份中的第幾天（1-31）箍土。
所以當(dāng)我們點(diǎn)擊了月份加減/年份加減的按鈕時(shí)，向calculate函數(shù)傳入變化后的year,month參數(shù)罐监，然后進(jìn)行渲染吴藻，日歷面板改變
其次，”選擇時(shí)間段并且另處于開始時(shí)間和結(jié)束時(shí)間之間的日期添加特殊的樣式“這一點(diǎn)也是花了不少時(shí)間來寫弓柱，
偽代碼如下：
// 初始化
var firstDate,secondDate=[0,0,0];
//點(diǎn)擊日歷面板上的日期的點(diǎn)擊事件的執(zhí)行函數(shù)的片段沟堡，每當(dāng)點(diǎn)擊事件被觸發(fā)，就會(huì)執(zhí)行該片段
if(self.isSelectRange){
var date=[self.year.innerHTML,self.month.innerHTML,ele.innerHTML];
if(self.firstDate[0]===0){//
if(self.secondDate[0]===0){//兩個(gè)日期都沒有被設(shè)置
self.firstDate=date;
}else{//firstDate沒有被設(shè)置矢空，secondDate已經(jīng)被設(shè)置,
}
}else{
if(self.secondDate[0]===0){//firstDate已經(jīng)設(shè)置航罗，
self.secondDate=date;
if(compareDate(self.firstDate.join('/'),self.secondDate.join('/'))){//如果第一個(gè)選擇的日期大于第二次選擇的日期，進(jìn)行交換
self.firstDate=[self.secondDate,self.secondDate=self.firstDate][0];
}
}else{//兩個(gè)日期都已經(jīng)被設(shè)置,已經(jīng)選擇了兩個(gè)元素屁药，再次選擇則都
self.secondDate=[0,0,0];
self.firstDate=date;
self.clearDayInRangeStyle();
}
}
self.day.innerHTML=ele.innerHTML;
self.render();
firstDate粥血，secondDate分別代表開始時(shí)間和結(jié)束時(shí)間。每次觸發(fā)日期的點(diǎn)擊事件時(shí)酿箭，就會(huì)執(zhí)行以上的代碼片段复亏，對(duì)firstDate和secondDate進(jìn)行更改，這樣的話缭嫡，無論是我對(duì)日歷面板進(jìn)行更新或者對(duì)開始時(shí)間和結(jié)束時(shí)間之間的日期顯示不同的樣式蜓耻，都可以通過firstDate和secondDate來實(shí)現(xiàn)。
顯示不同的樣式就判斷日期是否在開始時(shí)間和結(jié)束時(shí)間之間械巡，每次重新render的時(shí)候就給選擇過的firstDate和secondDate添加樣式刹淌。
包括計(jì)算開始時(shí)間和結(jié)束時(shí)間之間的跨度是否在設(shè)定的跨度內(nèi)，我們點(diǎn)擊按鈕后進(jìn)行判斷讥耗。
最后有勾，看看render函數(shù)怎么實(shí)現(xiàn)
關(guān)于render函數(shù)，有以下幾點(diǎn)需要注意：
- 清除日歷面板上的所有內(nèi)容和樣式古程，樣式通過清除每個(gè)單元格上的類實(shí)現(xiàn)
- 根據(jù)每月1號(hào)是周幾和每月的長(zhǎng)度生成每月的日歷
- 根據(jù)記錄的fisrtDate和secondDate來顯示已經(jīng)選擇過的選擇的樣式
以上大概是我的思路蔼卡，我也實(shí)現(xiàn)了一個(gè)組件，有興趣的朋友可以點(diǎn)這里挣磨，歡迎找bug~
ps:文筆還是不行雇逞，文章寫的好爛荤懂。。
