vue時間控件美化成IOS樣式(移動端)，vux組件datatime添加星期幾/周幾教程

input的時間控件有三種類型

屬性	Android	IOS
type="date"	年+月+日(原生UI樣式)	年+月+日(滾輪樣式)
type="datetime"	調不出來	調不出來
type="datetime-local"	年+月+日+時+分(原生UI)	月+日+周+時+分(滾輪樣式)

Android和IOS各有一套自家的UI風格交互設計，包括weui部分交互樣式都針對android和ios分別設計了兩套交互風格，但是俺家的UI狗是個蘋果派，一切交互樣式向蘋果看齊，安卓的交互用戶體驗實在太差，對！確實！沒錯！我完全認同UI的觀點(這句是大實話)，google的android交互師肯定都是實習生，騰訊的weui設計師肯定都是臨時工！

並且，系統自帶時間控件還有一個缺點，就是默認時間只能從當天當時當分當秒開始(即使你給他強制賦值，他也不理你)，如果你家的產品狗或者UI狗強迫讓你必須默認打開是“2008年08月08日08時08分08秒”，那么這個時候，你只有兩種選擇，要么伸手拿起你主機箱上放了很久的殺豬刀，來一個屠暴起斷其股，要么就去京東上買一瓶霸王來呵護一下你美麗的銹發了。相信懦弱的你肯定會選擇后者(沒錯，我也一樣 ！)

廢話扯得太多，好了，蜂鳥達達馬上給您送上干貨。

為了找一個類似IOS滾輪的時間控件樣式，真的是煞費苦心，翻閱了github的Vue相關開源項目庫匯總(url:/opendigg/awesome-github-vue[火車頭自己補全])，沒有一個能滿足UI需求的。然后又去github搜date、time、picker。還有手動修改weuiJs的picker，但是最多三列，date+time就得分兩次彈，折騰半天，最后，食之無味，棄之可惜。

最后，還是import {Datetime} from 'vux'吧，它是最接近ios滾輪樣式了，但是美中不足，滾輪中缺少星期幾，這一點可絕對不能少。

---

1. 修改文件
   node_modules\vux\src\components\datetime\datetimepicker.js
2. 添加變量（在文件中隨便找個位置，下文能調到就可以了）

   const jim = {
     currentYear: NOW.getFullYear(),
     currentMonth: NOW.getMonth() + 1,    
   }

3. 找到：_setDayScroller (year, month, day)，獲取改變后的年月，用於計算星期，添加代碼：

   {// 添加星期begin
           jim.currentYear = year;
           jim.currentMonth = month;
   }// 添加星期end

4. 找到：_makeData (type, year, month)，修改循環輸出，修改代碼為：

   for (let i = min; i <= max; i++) {
     let name
     if (type === 'year') {
       name = parseRow(config.yearRow, i)
     } else {
       const val = valueMap[list[0]] ? addZero(i) : i
       if(type === 'day'){// 添加星期begin
           let isIos = (/mmp|iphone|ipad|ipod\sce|palm/i.test(navigator.userAgent.toLowerCase()));
           if(isIos){
             let week = new Date(jim.currentYear+'/'+jim.currentMonth+'/'+val).getDay();
             name = parseRow(config[type + 'Row'], val) + " 周"+['日','一','二','三','四','五','六'][week];
           }else{
             let week = new Date(jim.currentYear+'-'+jim.currentMonth+'-'+val).getDay();
             name = parseRow(config[type + 'Row'], val) + " 周"+['日','一','二','三','四','五','六'][week];
           }
       }else{
           name = parseRow(config[type + 'Row'], val)
       }
       // console.log(jim.currentYear,jim.currentMonth,type,val,name)
     }
     data.push({
       name: name,
       value: i
     })
   }這就是最終效果，其實變化不大，就是多加了一列周幾而已

這是修改后的datetimepicker.js，直接覆蓋源文件也可以：datetimepicker

---