jquery mobile mobiscroll 日期插件使 用mobiscroll
官網網站：
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">
<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" />
<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