官网网站：

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. python 查询数据库返回的数据类型

    self.conn=MySQLdb.connect(host='localhost',port=3306, user='keystone', passwd='OptValley@4312', db=s ...

  2. Spring boot 入门三:SpringBoot用JdbcTemplates访问Mysql 实现增删改查

    建表脚本 -- create table `account`DROP TABLE `account` IF EXISTSCREATE TABLE `account` ( `id` int(11) NO ...

  3. Docker for Windows(二)登录与配置镜像加速器

    一.启动Docker for Windows 通过桌面Docker Desktop启动,右下角出现的白色鲸鱼图标保持稳定时,表示Docker正在正常运行,将鼠标移到图标上会显示"Docker ...

  4. sqlserver年月日转汉字大写

    也是今天sql群里有人问,看起来这个问题挺简单,但是我不知道具体该怎么实现.百度了一把,找到一个高手贡献的答案,记一下. 参考链接 sql中转换中文日期 ------ 配合相关函数 ------ cr ...

  5. Spring Boot—17MongoDB

    在MongoDB中插入如下的数据 db.baike.insert( { _id: 'freemark', desc: '新一代模板语言', tag: [ 'IT', '模板语言' ], comment ...

  6. Android Service不能再详细的教程

    这篇包含了: Service后台服务.前台服务.IntentService.跨进程服务.无障碍服务.系统服务 几乎所有Android Service相关的东西. 前言 作为四大组件之一的Service ...

  7. xxe漏洞实战

    前言 在 2017 年版的 OWASP TOP 10, xxe 强势上位. 本文对网上常见的利用方式做一个汇总 正文 测试环境 win10 phpstudy 测试代码: <?php $data ...

  8. 树莓派发射FM波——搭建私人小电台

    树莓派的应用十分广泛,有很多奇思妙想的应用非常有趣,在这里我们想实现一个小电台的功能,但是在这里需要说明,私人架设电台是违法行为,所以本案只作为自我娱乐所用,不能发射大功率的信号干扰正常的FM频段. ...

  9. C#判断奇偶数的函数

    // 现代流行的"程序员"public static bool IsOdd(int n) {     while (true)    {        switch (n)     ...

  10. Java设计模式----观察者模式详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...