在做移动端的页面时，用户报名某个活动，需要填写她的出生日期，这时可以用Mdate插件来完成，已达到更好的用户体验

　　操作很简单，效果也不错，是滑动选择时间的，也有回调函数方便我们使用。只需要在页面中引入iScroll.js和Mdate.js即可

使用说明

  1. 代码：new Mdate("dateSelectorOne");

  2. "dateSelectorOne"为你要显示选择后的日期的input，必填项;

  3. Mdate的默认开始日期为：2000年1月1日，可自定义

  4. Mdate的默认结束日期为：今天，可自定义

  5. Mdate的默认日期格式为：xxxx年xx月xx日，可自定义

    自定义项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    new Mdate("dateShowBtn", {
        //"dateShowBtn"为你点击触发Mdate的id，必填项
        acceptId: "dateSelectorTwo",
        //此项为你要显示选择后的日期的input，不填写默认为上一行的"dateShowBtn"
        beginYear: "2002",
        //此项为Mdate的初始年份，不填写默认为2000
        beginMonth: "10",
        //此项为Mdate的初始月份，不填写默认为1
        beginDay: "24",
        //此项为Mdate的初始日期，不填写默认为1
        endYear: "2017",
        //此项为Mdate的结束年份，不填写默认为当年
        endMonth: "1",
        //此项为Mdate的结束月份，不填写默认为当月
        endDay: "1",
        //此项为Mdate的结束日期，不填写默认为当天
        format: "-"
        //此项为Mdate需要显示的格式，可填写"/"或"-"或".",不填写默认为年月日
    })

    效果如图：

    它提供给的回调函数可以在选择完日期之后可以把选择的日期拿出来，放到某个元素上或者作为变量参数。

    附上下载链接：http://www.jq22.com/jquery-info18385

Mdate时间插件的更多相关文章

  1. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  2. bootstrap时间插件 火狐不显示 完美解决方法

    原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...

  3. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  4. bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

    <!DOCTYPE html><head> <title>时间插件测试</title><style type="text/css&quo ...

  5. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  6. 项目中遇到angular时间插件datetinepicker汉化问题

    问题描述: 测试需要中文的时间插件: 参考资料: angularjs封装bootstrap官网的时间插件datetimepicker https://www.cnblogs.com/cynthia-w ...

  7. 时间插件--daterangepicker使用和配置详解

    1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...

  8. bootstrap-datetimepicker时间插件

    bootstrap-datetimepicker时间插件 依赖的jar包 bootstrap的js和css jquery.js datetimepicker的js文件: bootstrap-datet ...

  9. 1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期

    一.用datetimepicker插件实现限定时间范围的选择 1.下面是要实现的效果图,让开始时间只能从  2018-7-1  到 2018-7-7 选择. 2.html的结构 <div cla ...

随机推荐

  1. jquery的优良继承方法

    说一下好处:这个封装函数可以可以实现子类继承父类原型对象里面的所有方法和属性,但是也留了第二条路,去继承父类构造函数的里面的东西. 两个参数分别是子类的构造函数,后面是父类构造函数 $.inherit ...

  2. selenium + python + nwjs

    1.下载chromedriver文件 http://chromedriver.storage.googleapis.com/index.html google官方下载地址 http://dl.nwjs ...

  3. windows下共享文件夹在Linux下打开

    ①首先在Windows下创建一个准备用来共享用的文件夹 ②在虚拟机下选择第一步创建的文件夹为共享文件夹 ③在虚拟机shell命令框下输入 cd  /mnt/sgfs 回车进入共享文件夹. 备注:其他细 ...

  4. iso移动端input的bug解决（vue）

    iso中input很奇怪,点击空白地方,键盘也不会消失,影响页面中其他功能 解决办法: 点击的元素不是input或者textarea,那么就让上一个获得焦点的输入框失去焦点. 涉及的代码: <i ...

  5. bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind

    今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一 ...

  6. lambda 委托 匿名方法

    委托: delegate是C#中的一种类型,它实际上是一个能够持有对某个方法的引用的类.与其它的类不同,delegate类能够拥有一个签名(signature),并且它只能持有与它的签名相匹配的方法的 ...

  7. ios开启双重认证之填坑式教学

    2019.03.01.阳光明媚(不,,,有些雾霾..) 本来打算发布一个新版本app,修复一些小小bug, 然而,打包出错了,,错误是显示账号无连接.. 顿时慌出了天际,,以为是账号的证书问题,,最烦 ...

  8. APP测试常见点

    1. 生成APK文件在真机上可以安装和卸载(安装卸载测试) 2. 第三方手机助手上面可以安装和卸载(安装卸载测试) 3. 启动APP 4. 验证数字签名.升级后可以正常使用.在线跨版本升级(在线升级测 ...

  9. tomcat 中项目配置文件统一目录设置

    在tomcat 安装目录中 conf 下的  catalina.properties 文件中 有个  shared.loader= 配置为   shared.loader="${catali ...

  10. CF数据结构练习(二)

    1. 833D Red-Black Cobweb 大意: 给定树, 边为黑色或白色, 求所有黑白边比例在$[\frac{1}{2},2]$内的路径边权乘积的乘积. 考虑点分治, 记黑边数为$a$, 白 ...