在做移动端的页面时，用户报名某个活动，需要填写她的出生日期，这时可以用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. mysql中利用show profile很直观的看到查询缓存的作用。

    1.首先,开启mysql的查询缓存. 查看查询缓存情况: MariaDB [test]> show variables like '%query_cache%';+--------------- ...

  2. mysqli_query($conn, $sql)的返回值类型

    SQL语句的分类: DDL: Data Define Language,数据定义语言——定义列 CREATE / DROP / ALTER / TRUNCATE DML: Data Manipulat ...

  3. SpringMVC，SpringBoot利用ajax上传文件到后台

    1.传递单文件 首先html文件中有个<input type=”file” name=”file” id=”file”/>元素. 前台js写法: var formData=new Form ...

  4. Lintcode228-Middle of Linked List-Naive

    228. Middle of Linked List Find the middle node of a linked list. Example Example 1: Input: 1->2- ...

  5. Python+MapReduce实现矩阵相乘

    算法原理 map阶段 在map阶段,需要做的是进行数据准备.把来自矩阵A的元素aij,标识成p条<key, value>的形式,key="i,k",(其中k=1,2,. ...

  6. python yaml用法详解

    YAML是一种直观的能够被电脑识别的的数据序列化格式,容易被人类阅读,并且容易和脚本语言交互.YAML类似于XML,但是语法比XML简单得多,对于转化成数组或可以hash的数据时是很简单有效的. Py ...

  7. js三元表达式

    条件 ? true的时候执行 : false时候执行 const x = 20; let answer; if (x > 10) { answer = 'greater than 10'; } ...

  8. Linux下安装docker

    //安装docker //需要输入时 输y就可以yum install -y epel-releaseyum install docker-io # 加入开机启动chkconfig docker on ...

  9. Kotlin 对象表达式和对象声明

    Kotlin 用对象表达式和对象声明来实现创建一个对某个类做了轻微改动的类的对象,且不需要去声明一个新的子类. 对象表达式 通过对象表达式实现一个匿名内部类的对象用于方法的参数中: window.ad ...

  10. introduce explaining variable 引入解释变量

    一段复杂的计算的表达式(一般 逻辑判断  if(a!=1 && b!=Null && a>b  ) && .... 直接在代码中参与到 代码的逻辑 ...