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

时间:2022-01-01 02:19:08

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

所以,一下狠心,索性写个全的吧,之前写的是mdater和mtimer俩兄弟,再来个合体的mdatetimer,意为可以同时选择日期和时间,当然你要只选择日期也是可以配置的。操作方式嘛,当然得滑动选择~
别的不说,先上个截图吧:
基于zepto的移动端日期+时间选择插件
你也可以点此访问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. 你如果给我打赏了,本人提供陪聊、陪解决问题、陪个性化定制等服务

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

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