您的位置：首页 > Web前端 > JQuery

jquery mobile 日期插件使用

2013-12-06 12:31 351 查看

昨天碰到使用日期的应用，就开始百度 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航