input的時(shí)間控件有三種類(lèi)型

屬性AndroidIOS

type="date"	年+月+日(原生UI樣式)	年+月+日(滾輪樣式)
type="datetime"	調(diào)不出來(lái)	調(diào)不出來(lái)
type="datetime-local"	年+月+日+時(shí)+分(原生UI)	月+日+周+時(shí)+分(滾輪樣式)

Android和IOS各有一套自家的UI風(fēng)格交互設(shè)計(jì)，包括weui部分交互樣式都針對(duì)android和ios分別設(shè)計(jì)了兩套交互風(fēng)格，但是俺家的UI狗是個(gè)蘋(píng)果派，一切交互樣式向蘋(píng)果看齊，安卓的交互用戶(hù)體驗(yàn)實(shí)在太差，對(duì)！確實(shí)！沒(méi)錯(cuò)！我完全認(rèn)同UI的觀點(diǎn)(這句是大實(shí)話(huà))，google的android交互師肯定都是實(shí)習(xí)生，騰訊的weui設(shè)計(jì)師肯定都是臨時(shí)工！

并且，系統(tǒng)自帶時(shí)間控件還有一個(gè)缺點(diǎn)，就是默認(rèn)時(shí)間只能從當(dāng)天當(dāng)時(shí)當(dāng)分當(dāng)秒開(kāi)始(即使你給他強(qiáng)制賦值，他也不理你)，如果你家的產(chǎn)品狗或者UI狗強(qiáng)迫讓你必須默認(rèn)打開(kāi)是“2008年08月08日08時(shí)08分08秒”，那么這個(gè)時(shí)候，你只有兩種選擇，要么伸手拿起你主機(jī)箱上放了很久的殺豬刀，來(lái)一個(gè)屠暴起斷其股，要么就去京東上買(mǎi)一瓶霸王來(lái)呵護(hù)一下你美麗的銹發(fā)了。相信懦弱的你肯定會(huì)選擇后者(沒(méi)錯(cuò)，我也一樣 ！)

廢話(huà)扯得太多，好了，蜂鳥(niǎo)達(dá)達(dá)馬上給您送上干貨。

為了找一個(gè)類(lèi)似IOS滾輪的時(shí)間控件樣式，真的是煞費(fèi)苦心，翻閱了github的Vue相關(guān)開(kāi)源項(xiàng)目庫(kù)匯總(url:/opendigg/awesome-github-vue[火車(chē)頭自己補(bǔ)全])，沒(méi)有一個(gè)能滿(mǎn)足UI需求的。然后又去github搜date、time、picker。還有手動(dòng)修改weuiJs的picker，但是最多三列，date+time就得分兩次彈，折騰半天，最后，食之無(wú)味，棄之可惜。

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

---

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

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

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

找到：_makeData (type, year, month)，修改循環(huán)輸出，修改代碼為： 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}) }這就是最終效果，其實(shí)變化不大，就是多加了一列周幾而已

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

---

?

轉(zhuǎn)載于:https://www.cnblogs.com/lvjiangmin/p/7268579.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。