基于zepto的移动端日期+时间选择插件

前段时间写了两个移动端的日期选择插件：轻量级移动端日期选择器，本来是为特定的场景中使用的，结果有同学反应不够灵活和强大。虽然我的看法是移动端的界面要尽可能简洁，功能要尽可能简单，但是难免还是会有各种各样的场景，有时候确实需要同时选择年、月、日、时、分、秒，日期的格式要能配置，要能显示“上午 下午”......诸如此类。

所以，一下狠心，索性写个全的吧，之前写的是mdater和mtimer俩兄弟，再来个合体的mdatetimer，意为可以同时选择日期和时间，当然你要只选择日期也是可以配置的。操作方式嘛，当然得滑动选择~

 

别的不说，先上个截图吧：

 

 

你也可以点此访问demo

 

界面看着牛逼哄哄的哈~怎么使用呢？

 

插件的说明如下：

依赖的js 库： zepto.js

使用方法：

1.在页面上引入 js 文件和css 文件

<link rel="stylesheet" href="zepto.mdatetimer.css">
<script src="zepto.js"></script>
<script src="zepto.mdatetimer.min.js"></script>

2.html代码中使用 input 作为输入框，为防止手机上弹出软件盘，设置 readonly 属性

<input type="text" id="picktime" value="" readonly>

3. 初始化插件：

$('#picktime').mdatetimer(config);

配置项config 为一个 js对象，所包含的属性及说明如下：

mode : 1, //时间选择器模式： 1 ：年月日，2 ：年月日时分（ 24 小时），3 ：年月日时分（ 12 小时），4 ：年月日时分秒。默认： 1
format : 2, //时间格式化方式： 1 ：2015 年 06月 10 日 17 时 30分 46 秒，2 ： 2015-05-10  17:30:46。默认： 2
years : [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017], // 年份数组
nowbtn : true, //是否显示现在按钮
onOk : null,  //点击确定时添加额外的执行函数 默认null
onCancel : null, //点击取消时添加额外的执行函数 默认null

具体使用请参考附件中的demo.html

 

源代码在此，附上下载地址：http://files.cnblogs.com/files/lvdabao/mdatetimer.zip

 

更新于2016.08.15

有朋友反馈本插件不支持一个页面初始化多个实例。所以此次更新增加了这个支持。可以在一个页面初始化多个了。用法如：

$('#picktime, #picktime2').mdatetimer(config);

我是用id来做区分各实例的的，所以input元素一定要有id哦。

 

使用方法就这样啦，最后，再随便声明一下：

1. 你可随意使用，随意修改，你可以选择给我打赏，也可以选择悄悄拿走

2. 你如果给我打赏了，本人提供陪聊、陪解决问题、陪个性化定制等服务

来吧骚年，打开支付宝，你都扫好几下了，何不再多扫一下：