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

---