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),获取改变后的年月,用于计算星期,添加代码:
    {// 添加星期beginjim.currentYear = year;jim.currentMonth = month;
    }// 添加星期end

  4. 找到:_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添加星期几/周几教程相关推荐

  1. 从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

    如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载, ...

  2. Vue学习笔记:Element时间控件设置某一个日期禁止选择

    Vue学习笔记:Element时间控件添加一段时间禁止选择 需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择 文档: 代码实现:在时间控件上添加 :picker-options=&quo ...

  3. vue elementUI 时间控件优化 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前

    时间控件优化 elementUI 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前 <el-form-item label="起始时间:" class=" ...

  4. Vue elementui时间控件编辑时报错:date.getHours is not a function

    时间控件,这里用了type="datetime",并且设置了格式化, value-format="yyyy-MM-dd HH:mm:ss" <el-for ...

  5. 轻量级的日期时间控件Pikaday

    今天看到一个网友分享的一篇文章,有关轻量级的日期时间控件Pikaday,感觉很实用.在这里总结一下,方便日后使用.因为之前也遇到过类似的问题,My97datepicker插件样式过于老旧,但又没有其它 ...

  6. laydate 时间控件去掉秒以及解决在移动端不能滑动的问题

    一.时间控件去掉秒,保留时分 二.时间控件在移动端不能滚动 一.时间控件去掉秒,保留时分 方法一:使用 ready 回调函数 ready 控件在打开时触发.打开控件时让秒消失. <script& ...

  7. 时间控件-时分秒/分秒/年月日

    做项目的时候,很多时候我们会遇到使用时间控件的部分,下面介绍一个时间控件,---calendar.js,,这个控件是晚上照的,根据需要,把它修改的更加完善了. 首先我们需要引入这些文件: 这个日期控件 ...

  8. My97DatePicker时间控件使用

    My97DatePicker时间控件使用  My97DatePicker是一款非常灵活好用的日期控件.使用非常简单.  1.下载My97DatePicker组件包  2.在页面中引入该组件js文件:  ...

  9. 一款好用的时间控件(时间选择器)-jeDate

    一款好用的时间控件(时间选择器)-jeDate 1.引入jedate.js: 2.上代码 1>方法一 <input class="datainp" id="d ...

最新文章

  1. Parser Generator Tips翻译(中英对译) by Joshua Xu
  2. 链表问题2——在单链表中删除倒数第K个节点
  3. Touch Bar 废物利用系列 | 在触控栏上显示 Dock 应用图标
  4. Spring JDBC-自增键和行集RowSet
  5. 首帧秒开+智能鉴黄+直播答题,阿里云直播系统背后技术大起底
  6. 最大公约数和最小公倍数问题(洛谷P1029题题解,Java语言描述)
  7. Knight Moves(信息学奥赛一本通-T1450)
  8. linux php jsp网页,Linux上架设支持JSP+PHP的Web服务器
  9. 矩阵sum_Matlab-sum与cumsum函数
  10. 选择排序两层遍历的目的
  11. 7. JanusGraph服务
  12. Capture Allegro走线Option详细介绍图文教程
  13. Symbian面试题
  14. 索引越界异常Exception java.lang.IndexOutOfBoundsException
  15. erphpdown最新版下载v11.12,WordPress内容付费插件
  16. xp系统进不去2008服务器共享,xp系统设置访问Server 2008R2的共享不输入密码的方法...
  17. bing输入法linux,必应Bing输入法特殊符号输入方法图文教程
  18. 做鼻子测试软件,深度解析鼻子类型,测试你属于哪种鼻子?
  19. 关于物联网远程控制技术,你了解的有多少?
  20. 帮我写一份情书给在一起200天的女朋友,要求1000字

热门文章

  1. JavaFX Button和Scene点击事件代码示例
  2. linux解决root用户无法ssh localhost的问题
  3. JVM调优:-XX:+PrintCommandLineFlags 查看程序使用的默认JVM参数
  4. Scala AKKA入门示例
  5. Scala集合数据结构特点
  6. Python Django 常用字段类型
  7. Spring aop面向切面编程概述
  8. 用python编写图片生成器_python生成器
  9. 【Java算法】一天24小时中,时针和分针一共重合多少次?
  10. oracle索引中丢失in或out参数,oracle 11g给表建触发器错误“索引中丢失 IN 或 OUT 参数:: 1...