input的時間控件有三種類型

屬性AndroidIOS

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滾輪樣式了，但是美中不足，滾輪中缺少星期幾，這一點可絕對不能少。

---

修改文件
node_modules\vux\src\components\datetime\datetimepicker.js

添加變量（在文件中隨便找個位置，下文能調到就可以了） const jim = {currentYear: NOW.getFullYear(),currentMonth: NOW.getMonth() + 1, }

找到：_setDayScroller (year, month, day)，獲取改變后的年月，用于計算星期，添加代碼： {// 添加星期beginjim.currentYear = year;jim.currentMonth = month; }// 添加星期end

找到：_makeData (type, year, month)，修改循環輸出，修改代碼為： for (let i = min; i <= max; i++) {let nameif (type === 'year') {name = parseRow(config.yearRow, i)} else {const val = valueMap[list[0]] ? addZero(i) : iif(type === 'day'){// 添加星期beginlet 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

---

?

轉載于:https://www.cnblogs.com/lvjiangmin/p/7268579.html

總結

以上是生活随笔為你收集整理的vue时间控件美化成IOS样式(移动端)，vux组件datatime添加星期几/周几教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。