Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件。以及各种滑动插件

可以让用户很方便的只需要滑动数字既可以选择日期。Mobiscroll作为一款jQuery日期插件可以让用户自定义主题，完全通过CSS文件修改样式

最近开发html5+css3手机APP经常用到的，觉得非常好用，兼容性又好，用户体验又很棒，所以就整理出来分享给大家，还支持设置皮肤、显示方式、日期选择模式、日期格式、语言、是否现在显示、显示的文本内容、开始年份、结束年份

下面看看效果图：

1、

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

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

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link href="css/mobiscroll.css" rel="stylesheet" />

<link href="css/mobiscroll_date.css" rel="stylesheet" />

<title>移动设备的日期选择jquery插件</title>

</head>

<body>

  <section id="form">

    <form action="">

      <label>出生日期：</label>

      <input type="text" name="USER_AGE" id="USER_AGE" readonly class="input" placeholder="请填写你的出生日期" />

      <div class="clear h10"></div>

      <input type="submit" id="tj" class="submit" value="提交" />

    </form>

  </section>

<script src="js/jquery.min.js"></script>

<script src="js/mobiscroll_date.js" charset="gb2312"></script>

<script src="js/mobiscroll.js"></script>

<script type="text/javascript">

$(function () {

    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', //日期选择模式

        dateFormat: 'yyyy-mm-dd',

        lang: 'zh',

        showNow: true,

        nowText: "今天",

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

        endYear: currYear + 10 //结束年份

    };

    $("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));

});

</script>

</body>

</html>

上图的demo下载地址：http://pan.baidu.com/s/1hs0V7AO   提取密码：v5s3

2、

3、

4、

部分精简代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll日期时间中文精简实例 </title>

    <script src="dev/jquery-1.9.1.js"></script>

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

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

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

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

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

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

    <!-- S 可根据自己喜好引入样式风格文件 -->

    <script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>

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

    <!-- E 可根据自己喜好引入样式风格文件 -->

    <style type="text/css">

        body {

            padding: 0;

            margin: 0;

            font-family: arial, verdana, sans-serif;

            font-size: 12px;

            background: #ddd;

        }

        input, select {

            width: 100%;

            padding: 5px;

            margin: 5px 0;

            border: 1px solid #aaa;

            box-sizing: border-box;

            border-radius: 5px;

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            -webkit-border-radius: 5px;

        }

        .header {

            border: 1px solid #333;

            background: #111;

            color: white;

            font-weight: bold;

            text-shadow: 0 -1px 1px black;

            background-image: linear-gradient(#3C3C3C,#111);

            background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));

            background-image: -moz-linear-gradient(#3C3C3C,#111);

        }

        .header h1 {

            text-align: center;

            font-size: 16px;

            margin: .6em 0;

            padding: 0;

            text-overflow: ellipsis;

            overflow: hidden;

            white-space: nowrap;

        }

        .content {

            padding: 15px;

            background: #fff;

        }

    </style>

    <script type="text/javascript">

        $(function () {

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

            var opt={};

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

            //opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };

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

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

            opt.default = {

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

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

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

                lang:'zh',

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

                endYear:currYear + 10 //结束年份

            };

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

              var optDateTime = $.extend(opt['datetime'], opt['default']);

              var optTime = $.extend(opt['time'], opt['default']);

            $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);

            $("#appTime").mobiscroll(optTime).time(optTime);

            //下面注释部分是上面的参数可以替换改变它的样式

            //希望一起研究插件的朋友加我个人QQ也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。

            // 直接写参数方法

            //$("#scroller").mobiscroll(opt).date();

            // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });

            //具体参数定义如下

            //{

            //preset: 'date', //日期类型--datatime --time,

            //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】

                                        //【wp light】【wp】

            //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】

            //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】

            //dateFormat: 'yyyy-mm-dd', // 日期格式

            //setText: '确定', //确认按钮名称

            //cancelText: '清空',//取消按钮名籍我

            //dateOrder: 'yymmdd', //面板中日期排列格

            //dayText: '日',

            //monthText: '月',

            //yearText: '年', //面板中年月日文字

            //startYear: (new Date()).getFullYear(), //开始年份

            //endYear: (new Date()).getFullYear() + 9, //结束年份

            //showNow: true,

            //nowText: "明天",  //

            //showOnFocus: false,

            //height: 45,

            //width: 90,

            //rows: 3}

        });

    </script>

</head>

<body>

    <div class="header">

        <h1>Mobiscroll精简实例</h1>

    </div>

    <div class="content">

        <div class="demos">

            <label for="appDate">日期</label>

            <input type="text" name="appDate" id="appDate" />

        </div>

        <div class="demos">

            <label for="appDateTime">日期时间</label>

            <input type="text" name="appDateTime" id="appDateTime" />

        </div>

        <div class="demos">

            <label for="appTime">时间</label>

            <input type="text" name="appTime" id="appTime" />

        </div>

    </div>

</body>

</html>

相关链接：

1、官网网址：http://www.mobiscroll.com/

2、官网下载地址：https://code.google.com/archive/p/mobiscroll/downloads

3、百度云下载地址：http://pan.baidu.com/s/1dFICCjZ  提取密码：copz

4、百度云精简版下载：http://pan.baidu.com/s/1dERPKJn 提取密码：wc6o

5、多种滑动插件下载：https://demo.mobiscroll.com/#components

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件的更多相关文章

  1. [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  2. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑

    $(function () { var currYear = (new Date()).getFullYear(); var opt={}; //opt.date = {preset : 'date' ...

  3. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  4. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  5. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  6. jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件

    jquery插件课程1  幻灯片.城市选择.日期时间选择.拖放.方向拖动插件 一.总结 一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...

  7. jquery mobiscroll移动端日期选择控件(无乱码)

    jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...

  8. jquery.mobiscroll仿Iphone ActionSheet省市区联动

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="u ...

  9. 手机wap网站建设的方法和技巧

    随着互联网技术的不断进步,越来越多的运营商对于手机wap网站的建设有了更多的投入,手机wap网站的建设和开发要根据网站的特点和经营范围来进行设计和建设,这样才可以提升手机wap网站建设的效果.现在智能 ...

随机推荐

  1. 【.net 深呼吸】细说CodeDom（2）：表达式、语句

    在上一篇文章中,老周厚着脸皮给大伙介绍了代码文档的基本结构,以及一些代码对象与CodeDom类型的对应关系. 在评论中老周看到有朋友提到了 Emit,那老周就顺便提一下.严格上说,Emit并不是针对代 ...

  2. 使用 .NET WinForm 开发所见即所得的 IDE 开发环境，实现不写代码直接生成应用程序

    直接切入正题,这是我09年到11年左右业余时间编写的项目,最初的想法很简单,做一个能拖拖拽拽就直接生成应用程序的工具,不用写代码,把能想到的业务操作全部封装起来,通过配置的方式把这些业务操作组织起来运 ...

  3. （一）开篇—杂谈WebGIS

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 我相信大家对百度地图,谷歌地图等相关应用已经是非常熟悉了.通过 ...

  4. 张小龙宣布微信小程序1月9日发布，并回答了大家最关心的8个问题

    2016 年 12 月 28 日,张小龙在微信公开课 PRO 版的会场上,宣布了微信小程序的正式发布时间. 微信小程序将于 2017 年 1 月 9 号正式上线. 同时他解释称,小程序就像PC时代的网 ...

  5. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  6. 基于开源项目SharpMap的热力图(HeatLayer)实现。

    当前公司需要一个用时较少的热力图呈现方案,在避免较底层的GDI开发和比较了多家GIS产品的实际效果之后,团队决定用sharpMap的API来实现,由于之前框架采用的是另外一个开源项目GMap.net, ...

  7. Mysql - 函数

    Mysql提供的函数是在是太多了, 很多我都见过, 别说用了. 园子里面, 有人弄了一个比较全的. MYSQL函数 我这里会将他写的完全拷贝下来, 中间会插入一些自己项目中使用过的心得 一.数学函数 ...

  8. Mysql - 数据库操作

    之前介绍了数据库的增删改查, 发现忘记了数据库的一些基本操作, 比如建库, 建表, 改表等等. 那这里就来小结一下数据库sql形式的基本操作. 一.库操作 1. 建库 在建库之前, 可能需要看一下, ...

  9. MySQL：常见使用问题

    内容 1.Linux 上安装 MySQL 2.单机上安装多实例 3.不知root密码情况下,修改root密码 1.Linux 上安装MySQL 安装步骤: 1)解压 tar.gz文件 -linux-g ...

  10. CentOS：Yum源的配置

    # cd /etc/yum.repos.d/ # mv CentOS-Base.repo CentOS-Base.repo.bak # wget http://mirrors.163.com/.hel ...