Mdate时间插件

时间：2022-08-31 08:44:56

　　在做移动端的页面时，用户报名某个活动，需要填写她的出生日期，这时可以用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需要显示的格式，可填写"/"或"-"或".",不填写默认为年月日
    })

    效果如图：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. USB协议-USB的包结构及包的分类

    USB是串行总线,所以数据是一位一位地在数据线上传送的.既然是一位一位地传送,就存在着一个数据位先后的问题.USB使用的是LSB在前的方式,即先出来的是最低位数据,接下来是次低位,最后是最高位(MSB ...

  2. HTML结构标签介绍

    HTML:超文本标记语言   介绍HTML基本标记   1:头部标记(head)-----  头部的内容不会再页面上显示 在头部元素中,一般需要包括标题<title>,基本信息(文档样式, ...

  3. psd via fft and pwelch

    %fft and pwelch方法求取功率谱load x.mat Fs = 1; t = (0:1/Fs:1-1/Fs).'; Nx = length(x); % Window data w = ha ...

  4. java中使用正则表达式匹配字符串

    在Java中使用正则表达式去匹配相应的字符串: String importFileRole = "(import)\\s*[a-zA-Z0-9_<>.]+\\;";// ...

  5. 【EF6学习笔记】（二）操练 CRUD 增删改查

    本篇原文链接: Implementing Basic CRUD Functionality 说明:学习笔记参考原文中的流程,为了增加实际操作性,并能够深入理解,部分地方根据实际情况做了一些调整:并且根 ...

  6. CLOS架构是啥？

    有多少种技术能够在六十五年后依旧能够熠熠生辉,在IT的基础架构中扮演着重要角色?CLOS架构应该算是一项.Clos架构,诞生于1952年,是由由贝尔实验室一位叫Charles Clos的人提出的.CL ...

  7. loadrunner 的Administration Page里面设置

    loadrunner 的Administration Page里面设置   1.Set LOGIN form's action tag to an error page.在登录的时候,传递一个动态变量 ...

  8. &lbrack;Windows Powershell&rsqb;-学习笔记（4）

    Powershell 定义变量 在powershell中变量名均是以美元符"$"开始,剩余字符可以是数字.字母.下划线的任意字符,并且powershell变量名大小写不敏感($a和 ...

  9. XPath语法和CSS选择器介绍

    XPath语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历.XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 ...

  10. &lpar;转&rpar;xshell基本操作步骤

    xshell  操作方法如下: mkdir +文件夹名   (新建目录) ls 文件浏览(使用ls命令列出文件列表的信息,默认情况下为当前目录下的所有文件,并按照字母顺序排列) file [选项].. ...

相关文章