在做移动端的页面时,用户报名某个活动,需要填写她的出生日期,这时可以用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. [Offer收割] 编程练习赛1

    A HihoCoder 1268 九宫 思路: 一般类似于数独的题目都是使用回溯解决,这里由于题目数据较小同样可以直接DFS得出结果.这里我用了一个偷懒的方法(next_permutation),直接 ...

  2. MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates)

    转载于: MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates) 虽然 [Display(Name="XX ...

  3. 翻译 | Improving Distributional Similarity with Lessons Learned from Word Embeddings

    翻译 | Improving Distributional Similarity with Lessons Learned from Word Embeddings 叶娜老师说:"读懂论文的 ...

  4. 算法(第四版)C# 习题题解——2.5

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 查找更方便的版本见:https ...

  5. list set map区别及适用场景

    list与Set.Map区别及适用场景   1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重 ...

  6. Office 2016 自定义安装

    Office2016已经不提供自定义安装功能,而采用C2R安装方式.使用镜像安装时,默认全部安装.想要自定义安装就需要用到微软提供的Office2016部署工具. 步骤 下载并运行微软提供的Offic ...

  7. 20175312 2018-2019-2 《Java程序设计》第8周学习总结

    20175312 2018-2019-2 <Java程序设计>第8周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第十章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...

  8. 使用卷积神经网络CNN完成验证码识别

    gen_sample_by_captcha.py 生成验证码图片 # -*- coding: UTF-8 -*- """ 使用captcha lib生成验证码(前提:pi ...

  9. 何给域名配置https证书

    原文链接:https://www.cnblogs.com/ymwang/p/6893105.html http和https的区别就是,后者在网络传输过程中会很安全,原因就是给http安装了SSL证书. ...

  10. 阿里云盾SSL证书即将到期怎么办?

    如果你也像我一样用了一个有效期限1年的DV证书,颁发厂商:Symantec.那当这个证书快到期的时候要怎么更换证书呢?1.证书安装环境是IIS82.下载重新购买的免费证书,对新证书进行重新先发.3.证 ...