先放张效果图：

完整Demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>测试</title>

    <link href="../JScripts/MobileDate/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css"/>

    <link href="../JScripts/MobileDate/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />

    <link href="../JScripts/MobileDate/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css"/>

    <!-- jQuery Include -->

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="../JScripts/MobileDate/mobiscroll.core-2.5.2.js" type="text/javascript"></script>

    <script src="../JScripts/MobileDate/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>

    <script src="../JScripts/MobileDate/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>

    <script src="../JScripts/MobileDate/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

    <script type="text/javascript">

        function  BindMobDate(obj) {

            //显示日历框，调用前，需要引入库文件

            var currYear = (new Date()).getFullYear();

            var opt={};

            opt.date = {preset : 'date'};

            opt.datetime = {preset : 'datetime'};

            opt.time = {preset : 'time'};

            opt.default = {

                theme: 'android-ics light', //皮肤样式

                display: 'modal', //显示方式

                mode: 'scroller', //日期选择模式

                lang:'zh',

                startYear:currYear - 70, //开始年份

                endYear:currYear + 0 //结束年份

            };

            $(obj).val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));

        }

        $(function() {

            //调用一次即可

            BindMobDate($("#btn1"));

        });

    </script>

</head>

<body>

    出生日期：<input type="text" id="btn1"  value=""/>

</body>

</html>

滚动日历弹框完整Demo

说明：

需要用到插件mobiscroll.datetime-2.5.1.js  下载地址：滚动日历弹框插件

M站 滚动日历弹框的更多相关文章

  1. 简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)

    弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...

  2. vue 弹框产生的滚动穿透问题

    首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export ...

  3. modal 弹框遮罩层，滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  4. js实现弹框及自动关闭

    <SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...

  5. H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  6. Unity调用Windows弹框、提示框(确认与否，中文)

    Unity调用Windows弹提示框 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  7. 微信小程序之底部弹框预约插件

    代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...

  8. 移动端ios升级到11及以上时，手机弹框输入光标出现错位问题

    引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...

  9. js在点击的按钮下面弹框

    效果如图,点击对应的按钮时,弹框会在对应的按钮下面显示,可以应用于列表等场景 前端代码 <%@ Page Language="C#" AutoEventWireup=&quo ...

随机推荐

  1. CI在CentOS中的部署与实践LNMP

    1. 平台:lnmp CentOS6.4 (64bit) nginx1.2.4+php5.5.7配置过程中遇到的问题与处理方式: 1. 404错误: 原因:nginx中的配置请求路径的问题 2. 40 ...

  2. AIX 第6章 指令记录

    AIX 存储管理 物理卷的概念和管理 卷组的概念和管理 逻辑卷的基本概念和管理 文件系统在逻辑卷上构建 日志文件系统的管理 镜像提高数据可用性 应用系统所需的存储切换 换页空间的功能和管理     在 ...

  3. Java 中带参无返回值方法的使用

    有时方法的执行需要依赖于某些条件,换句话说,要想通过方法完成特定的功能,需要为其提供额外的信息才行.例如,现实生活中电饭锅可以实现“煮饭”的功能,但前提是我们必须提供食材,如果我们什么都不提供,那就真 ...

  4. 树莓派 不稳定 ssh经常断 解决

    确保供电没问题,供电至少要0.7A,如果USB口有接东西就要更多 几个提高树莓派网络稳定性的方法 TroubleShooting(推荐!好多问题的解决方案) 设置树莓派SSH连接因超时闲置断开 树莓派 ...

  5. 嵌入式 uboot引导kernel，kernel引导fs

    1.uboot引导kernel: u-boot中有个bootm命令,它可以引导内存中的应用程序映像(Kernel),bootm命令对应 common/cmd_bootm.c中的do_bootm()函数 ...

  6. pthread_attr_t 线程属性(一)

    1.    线程属性:             使用pthread_attr_t类型表示,我们需要对此结构体进行初始化,                 初始化后使用,使用后还要进行去除初始化!    ...

  7. POJ 1844 Sum

    题意:给一个整数n,求当n由1到k的连续整数加或减组成时的最小的k. 解法:一开始觉得dp……后来觉得复杂度太大了……GG……百度了一下是个数学题orz. 如果n全部由加法组成,那么k可以组成k(k+ ...

  8. C++中，申请字符串数组可用new实现

    C++中,申请字符串数组可用new实现: char ** list = new char*[MAX_NUM]; for (int i = 0; i< MAX_LOOP; i++) list[i] ...

  9. nmon基础

    nmon是分析 AIX 和 Linux 性能的免费工具 最简单的安装方式(Ubuntu apt源) sudo apt-get install nmon 在terminal下打开nmon 敲CMD,出现 ...

  10. C.xml

    pre{ line-height:1; color:#1e1e1e; background-color:#f0f0f0; font-size:16px;}.sysFunc{color:#627cf6; ...