jquery mobile mobiscroll 日期插件使 用mobiscroll
官网网站：
http://www.mobiscroll.com/
http://code.google.com/p/mobiscroll/
1、精简版Demo:
2、年月日时分整合版Demo:
预览图：
以及的Demo：
1、精简出一个中文版本的Demo:
包括日期和时间共同选择等效果。
2、修改官方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的更多相关文章
- 分享15款为jQuery Mobile定制的插件
jQuery Mobile 1.0 已经发布了, 做为jQuery的移动设备类库, 并且依靠着jQuery这个及其受欢迎的类库,必将带给大家不一样的使用体验,基于jQuery Mobile的插件开发必 ...
- Mobiscroll日期插件使用
相关资源 官方帮助文档:https://docs.mobiscroll.com/3-0-1 导入资源文件 <link href="${webRoot}/template/green/w ...
- jquery ui bootstrap日期插件
http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...
- jquery移动端日期插件
不说多的,直接看代码<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- （六）Jquery Mobile主题及插件的使用
二.自定义主题 根据js自带的主题,提取出来进行更改 来自为知笔记(Wiz)
- jquery.mobile手机网页简要
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
- Jquery mobile 新手问题总汇
1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...
- [转载]Jquery mobile 新手问题总汇
原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...
- jquery mobile 自定义图标
Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任 ...
随机推荐
- [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取博客所有的文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的h ...
- C Traps：优先级常见错误
逻辑与关系运算符 if (flags & FLAG != 0) {...} 这类错误以前也犯过,因为!=的优先级比&要高所以实际上是这样的 if (flags & (FLAG ...
- 左连接sql
<?php public function sumZong($id){ $sql =' SELECT * FROM vvt_league_user AS p Left join vvt_leag ...
- HDU4336 Card Collector(期望 状压 MinMax容斥)
题意 题目链接 \(N\)个物品,每次得到第\(i\)个物品的概率为\(p_i\),而且有可能什么也得不到,问期望多少次能收集到全部\(N\)个物品 Sol 最直观的做法是直接状压,设\(f[sta] ...
- 【c++错误】类的语法错误 error c2533：constructors not allowed a return type（构造函数不允许返回一个类型）
今天编写类的程序的时候不小心把类后的分号忘写了,就出现上面的错误提示. 顺便复习下类的正确格式: class 类名 { public: //习惯上将公有类型放在前面,便于阅读 ……(外部接口) pro ...
- 为什么选用 React 创建混合型移动应用？
[编者按]本文作者为 14islands 联合创始人.创新 Web 开发者 David Lindkvist,主要介绍有关混合型应用搭建的方方面面.文章系国内 ITOM 管理平台 OneAPM 编译呈现 ...
- Java设计模式----观察者模式详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...
- 3.如何在Maven项目中引入自己的jar包
1.一般情况下jar包都可以使用pom.xml来配置管理,但也有一些时候,我们项目中使用了一个内部jar文件,但是这个文件我们又没有开放到maven库中. 我们会将文件放到我们项目中.(以下以java ...
- webpack-易混淆部分的解释
原文链接: https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9 webpack的核心哲学 1. 任何皆模块 正 ...
- 一次存储链路抖动因I/O timeout不同在AIX和HPUX上的不同表现(转)
去年一个故障案例经过时间的沉淀问题没在发生今天有时间简单的总结一下,当时正时午睡时分,突然告警4库8个实例同时不可用,这么大面积的故障多数是有共性的关连,当时查看数据库DB ALERT日志都是I/O错 ...