专注WEB开发 分享经验,沉淀知识

解决移动端时间插件zepto.mdater的几处bug

 作者:chenxing  时间:2017-09-07 17:54  阅读:1298  评论:

原因知道了,修改那自然是件容易的事儿,直接打开mdater.js将mdater中的tap修改为click。很多人可能觉得这么改会有一个担心,click的300ms延迟问题。

首先说下这个mdater的应用环境是在移动浏览器中的网页,非app应用。

介绍下这个框架:

1.mdater插件是一个轻量级的时间插件,依赖zepto.js。

2.相比与boostrap的daterpicker确实够轻依赖少。

3.非常时候在移动端的浏览器使用。

4.是一个比较独立的插件,不需要依赖特殊的环境,比如微信,app,或者一些大型框架比如boostrap,react。

5.唯一不足的是只能选日期,不支持时间选择。

6.来一张我在项目中应用的效果图:

mdater

看看mdater在移动浏览器中运行的bug:

1.按箭头选择时间的时候会前进或者后退会跳一个月后者一年,而不是逐一往下或往上走。

2.时间面板有时候会重叠。

原因分析:

为了解决这两个问题,做了很多的分析和测试。最后锁定了tap事件,是由tap在浏览器中执行式会出现穿透现象,这是个天然的bug,事件冒泡了。相当于你的一次tap被执行了两次,所以才会出现跳月或者跳年以及时间面板重叠的bug。

修改bug:

原因知道了,修改那自然是件容易的事儿,直接打开mdater.js将mdater中的tap修改为click。很多人可能觉得这么改会有一个担心,click的300ms延迟问题。这个如果跑在app中可能需要考虑这个问题,但在浏览器中执行,我觉得可以直接使用click,因为你根本感觉不到这300ms的延迟。

实践才是硬道理!不要被网上言之凿凿的技术文给唬住了,人云亦云。

使用姿势:

<input type="text" id="timegap-start" name="timegap_start" readonly="readonly">
//注意要加readonly,否则会呼出键盘的
var mdaterConfig = {
    minDate : new Date(2017, 01, 01)
}
$('#timegap-start').mdater(mdaterConfig);

好了,最后感谢mdater.js的作者,提供了一款优秀的插件,给我们省了不少时间。

对于更改的bug已提交到git上,可以git以下链接下载。

mdater修复git下载地址:http://git.oschina.net/cxing/javascript/tree/master/mdater

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/90.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  88

PHP字符串转数组的三种场景

 2018-05-05 01:32  181

PHP如何遍历字符串?

 2018-05-04 00:56  913

api接口常见的安全问题和解决方案

 2018-05-03 23:20  811

 最新评论

 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?
 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里