轻量级移动端日期选择器
在移动端进行日期选择想必困扰过不少小伙伴,在PC端我们比较丰富的选择,如jQueryUI的datepicker,但这些插件都比较臃肿,而且还要依赖一个同样臃肿的库。或许PC上可以忍受比较大的文件,网速相对快嘛。然而在移动端也面临同样的问题,想用一个日期选择器还得依赖一个庞大的UI库,如mobiscroll。但移动端的网速慢啊,而且要耗流量,用这么一个大家伙就显得无法忍受。
于是,我决定造轮子了。造一个轻量级的、适合在移动端使用的日期选择器。而且只依赖Zepto。(Zepto本身体积小,而且在移动端的使用很普遍了)
关于日期选择器的设计,我的想法是能多简单就多简单,没必要设计很多功能。毕竟是在移动端,而且只完成一件事:日期选择。如果光在日期选择上都需要用户有很多操作,那说明产品设计的有问题了。另外在操作方式上,移动端更适合滑动的方式来选择,而不是像PC上那样,搞很多小方格来点选。
但需求总是多样化的,为了满足简单的时间选择和复杂的日期选择,我直接写了两套,不同的场景使用各自合适的。下面分别介绍一下:
选择具体时间的mtimer
先上图:
功能介绍:
mtimer用来选择某一天的具体时间点,需要了解的主要有以下几点:
* 用于选择一个粗略的时间点
* 时间范围可配置
* 通过滑动操作来选择,左右两侧可独立滑动
* 时刻跨度暂设计为半小时
* 样式在独立的css文件中,可自己定制
技术细节:
* 依赖Zepto1.1.3核心模块
* 滑动操作用了isroll来实现的,自己懒得实现了,代码一并放进了zepto.mtimer.js,使用时无需再次引入iscroll.js
* 点击操作用了github上别人已经封装好的tap事件,没用zepto的
使用方法:
像使用其他Zepto插件那样使用:
1. 在页面引入相关文件:
<link rel="stylesheet" href="zepto.mtimer.css"> <script src="zepto.js"></script> <script src="zepto.mtimer.js"></script>
2. 页面上需要有一个input元素:
<input type="text" id="picktime" value="03-27 15:00" readonly>
3. 初始化插件:
$('#picktime').mtimer();
配置参数:
dateStart : new Date(), //开始日期 dateNum : 10, //天数 timeStart : 9, //开始时刻 timeNum : 12, //小时数 onOk : null, //点击确定的回调函数 onCancel : null, //点击取消的回调函数
基本东西就这么多啦,看一下在线的demo吧:点击这里 记得用chrome模拟移动设备来看哦~或者直接手机扫描下面的二维码:
选择年月日的mdater
如果业务需要选择更大范围的年月日,那就使用mtimer他表哥mdater吧,先上截图:
干净清爽有木有,为了最大程度保证轻量级,做到了极简DOM,没有那么多的标签嵌套,没有一个多余的标签。尽管我不喜欢在移动设备上进行点选操作,但既然业务有需求,只能搞成这样的方格了。用法就不介绍了,用过datepicker都知道。
技术细节:
* 依赖Zepto1.1.3核心模块
* 点击操作用了github上别人已经封装好的tap事件,没用zepto的,点击穿透、点击延迟等问题不必再关注。
使用方法:参照上面mtimer
配置参数:
maxDate : null, //最大日期 minDate : new Date(1970, 0, 1) //最小日期
好吧有点偷懒了~只有两个比较重要的配置,其他的暂时不考虑增加,等以后有需要了再升级吧。
简单介绍到此,下面来看下mdater的在线demo:点击这里。同样,请使用chrome模拟移动设备来体验最佳效果。
源码下载地址
内附demo自行查看
mtimer : http://files.cnblogs.com/files/lvdabao/mtimer.zip
mdater : http://files.cnblogs.com/files/lvdabao/mdater.zip
转载于:https://www.cnblogs.com/mtl-key/p/7126861.html
轻量级移动端日期选择器相关推荐
- 自己动手写一个移动端日期选择器组件
文章目录 背景 效果演示 思路 实现 1. picker-view 实现基础交互 2. 年月日动态配置以及支持最大最小日期 3. 支持不同日期模式 背景 本文写的组件是基于 uni-app 框架下的, ...
- Angular中修改第三方组件的样式 - zorro日期选择器右端不对齐的BUG
在一列上同时使用zorro的日期选择器和input组件会出现右端不对齐的BUG(nzSpan设置为一样) 上图中3个表单项:单据日期.开票.交货方式,nzSpan数值是一样的,可以看到日期选择器和下面 ...
- mui日期选择器html,MUI 移动端时间选择器
MUI 移动端时间选择器 MUI 移动端时间选择器 MUI 时间段的选择 1.效果展示 2.html 部分 按钮部分html 选择时间 开始时间 结束时间 3.js 部分 开始时间选择器的js,结束时 ...
- js日期控件_11个开源的Github开源日期选择器组件,供你选择
介绍 本文主要介绍几个Vue的时间日期选择器组件,目的在于让开发者们多一些选择,不管是从功能还是从样式,都可以选择一个适合的组件,这些组件没有绝对的好与不好,就看个人如何选择了,以下分别介绍十一个日期 ...
- 基于bootstrap模态框的日期选择器
近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...
- 每日分享,三款纯jquery移动端日期时间选择插件
序言:mm再也不用担心我找不到合适好看的日期选择插件了,今天分享三款纯jquery移动端日期时间选择插件,赶紧点赞收藏转发吧. 一.jQuery移动端触屏滑动时间日期选择插件 简介:jQuery移动端 ...
- android自定义滚动日期,Android基于wheelView实现自定义日期选择器
本文实例为大家分享了Android实现自定义日期选择器的具体代码,供大家参考,具体内容如下 项目要求效果图: 要求 "6月20 星期五" 这一项作为一个整体可以滑动,"7 ...
- 日期选择器:jquery datepicker的使用
在jquery ui中,提供了一个非常实用的日期选择器:datepicker,使用它能非常方便的展现日历中的日期,灵活配置相关选项,包括日期格式.范围等.我们经常在WEB应用中用到datepicker ...
- vue DatePicker日期选择器时差8小时
vue中使用element-ui中的日期选择器组件时,会造成时区差.在向数据库中做保存时发现传输的时间参数和前端控件所选时间端不匹配(相差8小时), 调试发现与后端接口没有问题,是控件本身的原因. 1 ...
- 顶级的 Bootstrap 日期选择器和时间选择器插件(附免费下载链接)
顶级的 Bootstrap 日期选择器和时间选择器插件 Bootstrap的Datepicker元素是一种用户友好和直观的方式,可以轻松选择日期.它可用于移动端和PC端,还可以选择以 "从右 ...
最新文章
- 在SQL Server中分页结果的最佳方法是什么
- 【Linux抓包工具之tcpdump】
- gRPC——简介与Hello World
- Sqlserver别太信任SysComments表中的text字段
- 文本框赋值guide matlab,科学网-Matlab: 学习GUI (使用GUIDE时需注意的几个问题)-刘磊的博文...
- 第二十四期:面试问:Kafka为什么速度那么快?该怎么回答
- 车牌号随机函数 php,模拟生成车牌号的程序.程序运行.生成十个随机的车牌子.......
- 2009年1月答疑帖
- 【小技巧】2345——劫持IE浏览器主页
- Python中更新pip版本的那些事
- 三维模型楼盘展示的功能及优点
- 金山毒霸--血淋淋的教训
- 苹果终端date命令_mac终端常用命令
- ThingJS-X森可视平台框架源码 java+Netcore版本 旗舰版企业版
- linux 深度 crossover,在Deepin V20(UOS)下使用crossover安装Kt交易师的方法
- jquery在线扫雷
- 【AIS学习】08:6比特ASCII码表
- openssl命令查看证书有效期_kubeadm初始化k8s集群延长证书过期时间
- 多协议数据采集网关结合TDEngine时序数据库
- 如何计算近似纳什均衡_纳什-纳什解(Nash-in-Nash Solution)简介