vue时间控件美化成ios样式(移动端)，vux组件datatime添加星期几/周几教程 -凯发k8官方网

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

总结

以上是凯发k8官方网为你收集整理的vue时间控件美化成ios样式(移动端)，vux组件datatime添加星期几/周几教程的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。