//    时间选择

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

        var opt_data = {

             preset: 'date', //日期

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

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

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

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

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

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

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

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

            endYear:, //结束年份

            showNow:true,

            nowText:'今天',

           hourText:'小时',

         minuteText:'分',

           startYear:currYear,

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

        };

        $("#demos").mobiscroll(opt_data);

插件的css和js

http://files.cnblogs.com/xinlinux/mobiscroll.custom-2.13.2.min.css

http://files.cnblogs.com/xinlinux/mobiscroll.custom-2.13.2.min.js

http://www.helloweba.com/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="gbk">

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

    <title>Mobiscroll</title>

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

    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

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

    <!-- <link href="http://files.cnblogs.com/xinlinux/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" /> -->

    <link href="http://www.wglong.com/index/demos/mobiscroll/css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />

    <script src="http://www.wglong.com/index/demos/mobiscroll/js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>

    <link href="css/mobiscroll.custom-2.13.2.min.css" rel="stylesheet" type="text/css" />

    <script src="js/mobiscroll.custom-2.13.2.min.js" type="text/javascript"></script>

</head>

<body>

<input id="demos" name="scroller" />   

    <script type="text/javascript">

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

            var opt_data = {

                 preset: 'date', //日期

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

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

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

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

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

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

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

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

                endYear:, //结束年份

                showNow:true,

                nowText:'今天',

               hourText:'小时',

             minuteText:'分',

               startYear:currYear,

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

            };

            $("#demos").mobiscroll(opt_data);

     /** $(function(){

        var opt = {

            preset: 'date', //日期

            theme: 'sense-ui', //皮肤样式

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

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

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

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

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

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

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

            endYear:2020 //结束年份

        };

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

    //之前给群里共享发错了。记得之前写过一个，估计丢了。现在重写一个。并完善一下，下面注释部分是上面的参数可以替换改变它的样式

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

    // 直接写参数方法

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

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

    //具体参数定义如下

    //{

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

    //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>

</body>

</html>

手机时间选择插件 Jquery的更多相关文章

  1. 9个最新的手机/移动设备jQuery插件

    随着互联网的流行,移动网站开始急速增加,在2014年手机网站将会出现很多,所以手机网站是必须要学会制作的.手机网站不像桌面平台一样制作,否则会影响显示效果,目前大部分手机网站使用响应式设计技术,而且也 ...

  2. 最新的手机/移动设备jQuery插件

    随着互联网的流行,移动网站开始急速增加,在2014年手机网站将会出现很多,所以手机网站是必须要学会制作的.手机网站不像桌面平台一样制作,否则会影响显示效果,目前大部分手机网站使用响应式设计技术,而且也 ...

  3. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  4. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  5. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  6. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  7. [插件]jQuery multiselect初始化及默认值修改

    下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...

  8. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  9. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

随机推荐

  1. BZOJ 1032 [JSOI2007]祖码Zuma

    1032: [JSOI2007]祖码Zuma Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 637  Solved: 318[Submit][Stat ...

  2. Javascript语法基础

    Javascript语法基础   一.基本数据类型   JavaScript中支持数字.字符串和布尔值三种基本数据类型: 1．数字 数字型是JavaScript中的基本数据类型.在JavaScript ...

  3. LeetCode——Majority Element

    在一个数组中找到主要的元素,也就是出现次数大于数组长度一半的元素.容易想到的方式就是计数,出现次数最多的就是majority element,其次就是排序,中间的就是majority element. ...

  4. 用Jpush极光推送实现抓取特定某个用户Log到七牛云服务器

    场景 我们的app常常会出现某个特定用户的手机出现异常情况,(注意不是所有用户,特定机型特定用户)如果用友盟,那么多log你也抓不完 ,看不到log就无法解决问题. 那么问题来了,如何实现对特定某个用 ...

  5. Android新浪微博客户端（七）——ListView中的图片异步加载、缓存

    原文出自:方杰|http://fangjie.info/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...

  6. [Design Pattern] Command Pattern 简单案例

    Command Pattern, 即命令模式,把一个命令包裹在一个对象里面,将命令对象传递给命令的执行方,属于行为类的设计模式 下面是命令模式的一个简单案例. Stock 代表被操作的对象.Order ...

  7. python_Opencv_绘图

    opencv中也可以用一些函数来绘图 直接上源码,例子: # -*- coding: utf-8 -*- import numpy as np import cv2 # 黑色的图片 img=np.ze ...

  8. setWillNotDraw和setFillViewport

    Romain Guy write a little info about a ScrollView attribute that is missing  from documentation : An ...

  9. [转] JS nodeType返回类型

    将HTML DOM中几个容易常用的属性做下记录: nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 node ...

  10. OpenStack对象存储——Swift

    OpenStack Object Storage(Swift)是OpenStack开源云计算项目的子项目之一,被称为对象存储,提供了强大的扩展性.冗余和持久性.本文将从架构.原理 和实践等几方面讲述S ...