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滚轮样式了,但是美中不足,滚轮中缺少星期几,这一点可绝对不能少。
- 修改文件
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添加星期几/周几教程相关推荐
- 从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)
如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载, ...
- Vue学习笔记:Element时间控件设置某一个日期禁止选择
Vue学习笔记:Element时间控件添加一段时间禁止选择 需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择 文档: 代码实现:在时间控件上添加 :picker-options=&quo ...
- vue elementUI 时间控件优化 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前
时间控件优化 elementUI 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前 <el-form-item label="起始时间:" class=" ...
- Vue elementui时间控件编辑时报错:date.getHours is not a function
时间控件,这里用了type="datetime",并且设置了格式化, value-format="yyyy-MM-dd HH:mm:ss" <el-for ...
- 轻量级的日期时间控件Pikaday
今天看到一个网友分享的一篇文章,有关轻量级的日期时间控件Pikaday,感觉很实用.在这里总结一下,方便日后使用.因为之前也遇到过类似的问题,My97datepicker插件样式过于老旧,但又没有其它 ...
- laydate 时间控件去掉秒以及解决在移动端不能滑动的问题
一.时间控件去掉秒,保留时分 二.时间控件在移动端不能滚动 一.时间控件去掉秒,保留时分 方法一:使用 ready 回调函数 ready 控件在打开时触发.打开控件时让秒消失. <script& ...
- 时间控件-时分秒/分秒/年月日
做项目的时候,很多时候我们会遇到使用时间控件的部分,下面介绍一个时间控件,---calendar.js,,这个控件是晚上照的,根据需要,把它修改的更加完善了. 首先我们需要引入这些文件: 这个日期控件 ...
- My97DatePicker时间控件使用
My97DatePicker时间控件使用 My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件: ...
- 一款好用的时间控件(时间选择器)-jeDate
一款好用的时间控件(时间选择器)-jeDate 1.引入jedate.js: 2.上代码 1>方法一 <input class="datainp" id="d ...
最新文章
- Parser Generator Tips翻译(中英对译) by Joshua Xu
- 链表问题2——在单链表中删除倒数第K个节点
- Touch Bar 废物利用系列 | 在触控栏上显示 Dock 应用图标
- Spring JDBC-自增键和行集RowSet
- 首帧秒开+智能鉴黄+直播答题,阿里云直播系统背后技术大起底
- 最大公约数和最小公倍数问题(洛谷P1029题题解,Java语言描述)
- Knight Moves(信息学奥赛一本通-T1450)
- linux php jsp网页,Linux上架设支持JSP+PHP的Web服务器
- 矩阵sum_Matlab-sum与cumsum函数
- 选择排序两层遍历的目的
- 7. JanusGraph服务
- Capture Allegro走线Option详细介绍图文教程
- Symbian面试题
- 索引越界异常Exception java.lang.IndexOutOfBoundsException
- erphpdown最新版下载v11.12,WordPress内容付费插件
- xp系统进不去2008服务器共享,xp系统设置访问Server 2008R2的共享不输入密码的方法...
- bing输入法linux,必应Bing输入法特殊符号输入方法图文教程
- 做鼻子测试软件,深度解析鼻子类型,测试你属于哪种鼻子?
- 关于物联网远程控制技术,你了解的有多少?
- 帮我写一份情书给在一起200天的女朋友,要求1000字
热门文章
- JavaFX Button和Scene点击事件代码示例
- linux解决root用户无法ssh localhost的问题
- JVM调优:-XX:+PrintCommandLineFlags 查看程序使用的默认JVM参数
- Scala AKKA入门示例
- Scala集合数据结构特点
- Python Django 常用字段类型
- Spring aop面向切面编程概述
- 用python编写图片生成器_python生成器
- 【Java算法】一天24小时中,时针和分针一共重合多少次?
- oracle索引中丢失in或out参数,oracle 11g给表建触发器错误“索引中丢失 IN 或 OUT 参数:: 1...