摘要：百度前端技術(shù)學(xué)院上有一個(gè)任務(wù)，要實(shí)現(xiàn)一個(gè)日期選擇組件，本文由此而來(lái)看看需求組件默認(rèn)一直呈顯示狀態(tài)通過(guò)某種方式選擇年月，選擇了年月后，日期列表做相應(yīng)切換通過(guò)單擊某個(gè)具體的日期進(jìn)行日期選擇組件初始化時(shí)，可配置可選日期的上下限。

看看需求

組件默認(rèn)一直呈顯示狀態(tài)

通過(guò)某種方式選擇年、月，選擇了年月后，日期列表做相應(yīng)切換

通過(guò)單擊某個(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)接口方法，來(lái)決定這個(gè)日歷組件是選擇具體某天日期，還是選擇一個(gè)時(shí)間段

當(dāng)設(shè)置為選擇時(shí)間段時(shí)，需要在日歷面板上點(diǎn)擊兩個(gè)日期來(lái)完成一次選擇，兩個(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)來(lái)
            },
            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));

通常我寫(xiě)組件時(shí)的基本結(jié)構(gòu)如上，你可以根據(jù)組件的需要或者自己習(xí)慣進(jìn)行編寫(xiě)。然后就可以在html里面添加以下的代碼就可以調(diào)用我們的組件了，

下面再看一下我們的需求，我們來(lái)一 一分析

需求也不是很多嘛，手動(dòng)斜眼~
先上圖，根據(jù)圖再慢慢分析

其實(shí)我們看了需求之后，每個(gè)人都會(huì)有一個(gè)大概的思路，下面說(shuō)一下我的思路
首先，要實(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í)間段并且另處于開(kāi)始時(shí)間和結(jié)束時(shí)間之間的日期添加特殊的樣式“這一點(diǎn)也是花了不少時(shí)間來(lái)寫(xiě)，
偽代碼如下：

// 初始化
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è)日期都沒(méi)有被設(shè)置
                     self.firstDate=date;
                }else{//firstDate沒(méi)有被設(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分別代表開(kāi)始時(shí)間和結(jié)束時(shí)間。每次觸發(fā)日期的點(diǎn)擊事件時(shí)，就會(huì)執(zhí)行以上的代碼片段，對(duì)firstDate和secondDate進(jìn)行更改，這樣的話，無(wú)論是我對(duì)日歷面板進(jìn)行更新或者對(duì)開(kāi)始時(shí)間和結(jié)束時(shí)間之間的日期顯示不同的樣式，都可以通過(guò)firstDate和secondDate來(lái)實(shí)現(xiàn)。

顯示不同的樣式就判斷日期是否在開(kāi)始時(shí)間和結(jié)束時(shí)間之間，每次重新render的時(shí)候就給選擇過(guò)的firstDate和secondDate添加樣式。

包括計(jì)算開(kāi)始時(shí)間和結(jié)束時(shí)間之間的跨度是否在設(shè)定的跨度內(nèi)，我們點(diǎn)擊按鈕后進(jìn)行判斷。
最后，看看render函數(shù)怎么實(shí)現(xiàn)
關(guān)于render函數(shù)，有以下幾點(diǎn)需要注意：

清除日歷面板上的所有內(nèi)容和樣式，樣式通過(guò)清除每個(gè)單元格上的類(lèi)實(shí)現(xiàn)

根據(jù)每月1號(hào)是周幾和每月的長(zhǎng)度生成每月的日歷

根據(jù)記錄的fisrtDate和secondDate來(lái)顯示已經(jīng)選擇過(guò)的選擇的樣式

以上大概是我的思路，我也實(shí)現(xiàn)了一個(gè)組件，有興趣的朋友可以點(diǎn)這里，歡迎找bug~
ps:文筆還是不行，文章寫(xiě)的好爛。。