zoukankan      html  css  js  c++  java
  • 基于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. 你如果给我打赏了,本人提供陪聊、陪解决问题、陪个性化定制等服务

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

       

  • 相关阅读:
    How To Scan QRCode For UWP (4)
    How To Crop Bitmap For UWP
    How To Scan QRCode For UWP (3)
    How To Scan QRCode For UWP (2)
    How To Scan QRCode For UWP (1)
    How to change windows applicatioin's position via Win32 API
    8 Ways to Become a Better Coder
    How to resize or create a thumbnail image from file stream on UWP
    C# winform压缩文件夹带进度条
    MS ACCESS MID函数
  • 原文地址:https://www.cnblogs.com/lvdabao/p/mobile-datetime-picker.html
Copyright © 2011-2022 走看看