在做移动端的页面时,用户报名某个活动,需要填写她的出生日期,这时可以用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. knative

    office Doc Knative 简介 Install sevice example (knative) There is only one node in the cluster so we u ...

  2. Python3 tkinter基础 Scale orient 横竖 resolution单步步长 length 长度 tickinterval 指示刻度

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. Java 诊断工具 Arthas 教程学习笔记

    Java 诊断利器 Arthas,是阿里的一款开源工具.Github-alibaba/arthas 上可以看到它的介绍.了解它,主要是最近对分析 Java 错误堆栈比较感兴趣,机缘巧合看到了它. 本文 ...

  4. PageRank算法实现

    基本原理 在互联网上,如果一个网页被很多其他网页所链接,说明它受到普遍的承认和信赖,那么它的排名就高.这就是PageRank的核心思想. 引用来自<数学之美>的简单例子: 网页Y的排名应该 ...

  5. 剑指offer 14:链表中倒数第k个节点

    题目描述 输入一个链表,输出该链表中倒数第k个结点. /* public class ListNode { int val; ListNode next = null; ListNode(int va ...

  6. laravel——基础增删改查

    一.控制器代码 <?php namespace App\Http\Controllers; use Illuminate\Support\Facades\DB; class CurdContro ...

  7. 使用C#创建Windows服务 并发布Windows 服务

    一.开发环境 操作系统:Windows 10 X64 开发环境:VS2015 编程语言:C# .NET版本:.NET Framework 4.0 目标平台:X86 二.创建Windows Servic ...

  8. Ubuntu 18.04.1安装Nginx

    一.安装Nginx所需的环境 Ubuntu可以通过apt源安装以下依赖库,CentOS可以通过yum安装 1.Nginx是C语言开发,需要gcc依赖库 先检查本机是否有gcc环境 gcc -v 如果没 ...

  9. hive小文件合并设置参数

    Hive的后端存储是HDFS,它对大文件的处理是非常高效的,如果合理配置文件系统的块大小,NameNode可以支持很大的数据量.但是在数据仓库中,越是上层的表其汇总程度就越高,数据量也就越小.而且这些 ...

  10. java中循环遍历实体类的属性和数据类型以及属性值

    package com.walkerjava.test; import java.lang.reflect.Field; import java.lang.reflect.InvocationTarg ...