在做移动端的页面时，用户报名某个活动，需要填写她的出生日期，这时可以用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. C# WMI通过网络连接名称获取IP掩码网关

    /// <summary> /// 读取IP,掩码,网关地址 /// </summary> /// <param name="netConnectorName& ...

  2. （转）在Eclipse中进行C/C++开发的配置方法（20140721最新版）

    因准备考试原因需要在windows下配置C++标准运行环境,找到此文,Mark之. 先列举下自己遇到的情况: 1 JRE安装不上,点了exe文件后没有反应:   安装JDK!!! 2 Eclipse找 ...

  3. 解决jmeter中文乱码的三种方法

    1.在Jmeter中的Http请求中,在内容编码后填入“utf-8”. 2.在本地文件存储Jmeter的bin目录下,修改jmeter.properties文件. (1)用记事本打开jmeter.pr ...

  4. Vue 组件&组件之间的通信 父子组件的通信

    在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...

  5. 分布式事务、多数据源、分库分表中间件之spring boot基于Atomikos+XADataSource分布式事务配置（100%纯动态）

    本文描述spring boot基于Atomikos+DruidXADataSource分布式事务配置(100%纯动态),也就是增加.减少数据源只需要修改application.properties文件 ...

  6. 基于OpenCV做“三维重建”（3）--相机参数矩阵

    通过前面的相机标定,我们能够获得一些参数模型.但是这些相机的参数矩阵到底是什么意思?怎样才能够判断是否正确?误差都会来自哪里?这里就必须要通过具体实验来加深认识.采集带相机参数的图片具有一定难度,幸好 ...

  7. 直方图均衡化与Matlab代码实现

    昨天说了,今天要好好的来解释说明一下直方图均衡化.并且通过不调用histeq函数来实现直方图的均衡化. 一.直方图均衡化概述 直方图均衡化(Histogram Equalization) 又称直方图平 ...

  8. tcp的三次握手，四次挥手

    为了更好的记住知识点,所以将最近学习的知识点记录下来: 最开始A和B都处于closed(关闭连接状态) 1.tcp的第一次握手:客户端A  向服务器端B 发送请求连接报文段(包含SYN=1,初始序号s ...

  9. redis.exceptions.ConnectionError: Error 111 connecting to localhost:6379. Connection refused.

    $ pip install redis>>> import redis>>> conn = redis.Redis()>>> conn.keys( ...

  10. jQuery Validate和Thymeleaf相关

    jQuery Validate https://www.cnblogs.com/liuhongfeng/p/5135676.html https://www.cnblogs.com/linjiqin/ ...