在做移动端的页面时，用户报名某个活动，需要填写她的出生日期，这时可以用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. React Native之常用组件（View）

    一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...

  2. iframe父子操作

    1.js在iframe子页面操作父页面元素代码: window.parent.document.getElementByIdx_x("父页面元素id"); 2.js在父页面获取if ...

  3. bloc控制读写文件

    import 'package:flutter/material.dart'; import 'dart:io'; import 'package:path_provider/path_provide ...

  4. Linux nmcli 网络管理

    Linux nmcli 网络管理 RHEL 和 CentOS 系统默认使用 NetworkManager 来提供网络服务,这是一种动态管理网络配置的守护进程,能够让网络设备保持连接状态.可以使用 nm ...

  5. day 06

    深浅拷贝 # 值拷贝:应用场景最多ls = [1, 'abc', [10]]​ls1 = ls  # ls1直接将ls中存放的地址拿过来# ls内部的值发生任何变化,ls1都会随之变化​ls2 = l ...

  6. 关于C#的Main(String[] args)参数输入问题

    关于C#的Main(String[] args)参数输入问题 指定相关的测试代码 首先,写一个用于测试的关于Main(String[] args)参数输入有关的代码类,如下: using System ...

  7. C#线程同步（4）- 通知＆EventWaitHandle一家

    文章原始出处 http://xxinside.blogbus.com/logs/47523285.html 预备知识:C#线程同步(1)- 临界区&Lock,C#线程同步(2)- 临界区&am ...

  8. PHP 获取当前访问的完整URL

    代码如下: <?php // php 获取当前访问的完整url function GetCurUrl() { $url = 'http://'; if(isset($_SERVER['HTTPS ...

  9. Vue-admin工作整理（十二）：Vuex-插件（持久化存储）

    Vuex可以支持插件形式,来处理指定业务,比如:持久化存储的插件(当每次刷新浏览器的时候store里面的参数都会被清除,因为它是存在内存中的,而不是存在本地的,有时候我们希望将一些东西存在本地) 插件 ...

  10. H5外包团队 2019案例更新

    H5外包团队 2019案例更新 本项目控件均为动态加载,3D部分使用Unity3D,其它基于ReactJS,NodeJS,部分使用cocos2D,由于项目涉密,只能发部分截图,欢迎联系索取更多案例,企 ...