官网网站:

http://www.mobiscroll.com/

http://code.google.com/p/mobiscroll/

1、精简版Demo:

查看Demo »

下载Demo »

2、年月日时分整合版Demo:

预览图:

查看Demo »

下载Demo »

以及的Demo:

1、精简出一个中文版本的Demo:

包括日期和时间共同选择等效果。

查看Demo »

2、修改官方Demo,并加入中文版本的可选项

此demo暂无在线预览,请下载完整包:

下载Demo »

昨天碰到使用日期 的应用,就开始百度 jquery mobile 日期插件

一般是使用 datebox 和 mobilescroll

昨天开始研究datebox,一直到今天上午才研究好,而且只研究了 日期控件,  日期带时间一起的好像没有。

没办法 就开始研究 mobiscroll

使用很方便,只需要引入2个文件 。

下面是 data 和 datatime 2种 控件的使用方法。

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
    <link href="../jquery.mobile-1.3.2/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
    <script src="../jquery.mobile-1.3.2/jquery.js" type="text/javascript"></script>
    <script src="../jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

<link href="../plug-data-scroll/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
    <script src="../plug-data-scroll/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>

<title>预警信息</title>
    <style type="text/css">

</style>

<script>
        var opt_data = {
            preset: 'date', //日期
            theme: 'jqm', //皮肤样式
            display: 'modal', //显示方式
            mode: 'clickpick', //日期选择模式
            dateFormat: 'yy-mm-dd', // 日期格式
            setText: '确定', //确认按钮名称
            cancelText: '取消',//取消按钮名籍我
            dateOrder: 'yymmdd', //面板中日期排列格式
            // dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
            yearText: '年', monthText: '月',  dayText: '日',  //面板中年月日文字
            endYear:2020, //结束年份
            showNow:true,
            nowText:'今天',
            hourText:'小时',
            minuteText:'分'
        };
    /*    var opt_datatime = {
            preset: 'datetime', //日期
            theme: 'jqm', //皮肤样式
            display: 'modal', //显示方式
            mode: 'clickpick', //日期选择模式
            dateFormat: 'yy-mm-dd', // 日期格式
            setText: '确定', //确认按钮名称
            cancelText: '取消',//取消按钮名籍我
            dateOrder: 'yymmdd', //面板中日期排列格式
            yearText: '年', monthText: '月',  dayText: '日',  //面板中年月日文字
            endYear:2020 ,//结束年份
            nowText:'今天',
            hourText:'小时',
            minuteText:'分'
        };*/

$(document).ready(function()
        {

$("#mydate1").mobiscroll(opt_data);
            $("#mydate2").mobiscroll(opt_data);
           // $("#datatime1").mobiscroll(opt_datatime);
            $("#filter1").click(function()
            {
                alert($("#mydate2").val());
            });
        })
    </script>
</head>

<body>

<div data-role="page"   >

<div data-role="header" data-position="fixed" data-theme="b">
       <a href="main.html" data-role="button" data-icon="back">返回</a>
        <h1>农田预警信息</h1>

</div>
    <div data-role="content">

<fieldset ><legend style="color: #006600">选择时间段</legend><hr>
       <input name="mydate" id="mydate1" type="text" data-role="datebox"   data-inline="true"  placeholder="开始时间" autofocus>
       <input name="mydate2" id="mydate2" type="text" data-role="datebox"   data-inline="true"  placeholder="结束时间" autofocus>
       </fieldset>

<a href="#" data-role="button" id="filter1">查询</a>
      
        <ul  data-role="listview" data-inset="true"  data-count-theme="d">
            <li><a href="alter-detail-rain.html" data-transition="slidedown"  data-ajax='false' > 雨量预警 <span class="ui-li-count"  > 2 </span></a></li>

<li><a href="mian.html" data-transition="slidedown"  data-ajax='false' > 河道水位预警 <span class="ui-li-count" > 2 </span></a> </li>

<li><a href="chuancai.html"    data-transition="flip" > 水库水位预警 <span class="ui-li-count" > 5 </span></a> </li>

<li><a href="xiangcai.html" data-transition="slidedown"  data-ajax='false' > 全部预警 <span class="ui-li-count" >9</span></a> </li>
        </ul>

</div>

<div align="center" data-role="footer" data-position="fixed"  data-theme="c" >
        <div data-role="navbar"  data-iconpos="top">
            <ul>
                <li><a href="main.html" data-icon="home"   >首页</a></li>
                <li><a href="NongTianInfo.html" data-icon="info">农田环境</a></li>
                <li><a href="alter.html"    data-icon="search" >预警查询</a></li>
                <li><a href="#" data-icon="send-msg">信息上报</a></li>

</ul>
        </div>
    </div>

</div>

</body>
</html>

jquery mobile mobiscroll 日期插件使 用mobiscroll的更多相关文章

  1. 分享15款为jQuery Mobile定制的插件

    jQuery Mobile 1.0 已经发布了, 做为jQuery的移动设备类库, 并且依靠着jQuery这个及其受欢迎的类库,必将带给大家不一样的使用体验,基于jQuery Mobile的插件开发必 ...

  2. Mobiscroll日期插件使用

    相关资源 官方帮助文档:https://docs.mobiscroll.com/3-0-1 导入资源文件 <link href="${webRoot}/template/green/w ...

  3. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  4. jquery移动端日期插件

    不说多的,直接看代码<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. (六)Jquery Mobile主题及插件的使用

    二.自定义主题      根据js自带的主题,提取出来进行更改 来自为知笔记(Wiz)

  6. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  7. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...

  8. [转载]Jquery mobile 新手问题总汇

    原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...

  9. jquery mobile 自定义图标

    Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任 ...

随机推荐

  1. ZAB 算法

    ZAB (Zookeeper Atomic Broadcast )  zookeeper原子消息广播协议 保证:分布式数据一致性  所有事务请求必须由一个全局唯一的服务器来协调处理,这样的服务器被称为 ...

  2. FZU2150(KB1-I)

    Fire Game Accept: 1955    Submit: 6880Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem Descr ...

  3. cakephp引入其他控制器封装方法

  4. HTML5 FormData实现文件上传实例

    表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. For ...

  5. JS 中的布尔运算符 && 和 ||

    布尔运算符 && 和 ||的返回结果不一定是布尔值!由此来展开一定的研究及理解. 1.首先先介绍下常见的数据类型转化为bool后的值. (常用地方)在if表达式中,javascript ...

  6. 各浏览器禁用某网站JS脚本的方法 【转】

    某些网站,经常会加载一些非常讨厌的JS脚本,如果我们想禁止这个网站的JS脚本,可以使用下面的方法: 一.IE浏览器 1.在Internet选项中,选择安全选项卡,然后点击受限制的站点,点击下面的站点 ...

  7. git报错:Pull is not possible because you have unmerged files解决方法

    在git pull的过程中,如果有冲突,那么除了冲突的文件之外,其它的文件都会做为staged区的文件保存起来. 重现: $ git pull A    Applications/Commerce/B ...

  8. Tomcat、Apache、IIS这三种Web服务器来讲述3种搭建JSP运行环境的方法

    一.相关软件介绍 1. J2SDK:Java2的软件开发工具,是Java应用程序的基础.JSP是基于Java技术的,所以配置JSP环境之前必须要安装J2SDK. 2. Apache服务器:Apache ...

  9. oracle 实现主键自增

    -- 创建表 drop table test; create table test(id number(10), name varchar2(10)); -- 创建对列 drop sequence s ...

  10. Mysql中的delimiter详解

    初学mysql时,可能不太明白delimiter的真正用途,delimiter在mysql很多地方出现,比如存储过程.触发器.函数等. 学过oracle的人,再来学mysql就会感到很奇怪,百思不得其 ...