提供許多種日期、時間的UI介面，有支援中文。
官網在http://dev.jtsage.com/jQM-DateBox/
下載URL：http://dev.jtsage.com/jQM-DateBox/demos/install.html
在jQuery Mobile的網頁中，在Input中直接設定data-role與mode：
執行時，只要點選文字方塊後方的圖示，就會顯示月曆
範例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Content/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
</head>
<body>
<div data-role="page" id="Page1">
<div data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</div>
<!-- /header -->
<div data-role="content">
<input type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>©Copyright 2012 Tony & Vivid </h4>
</div>
<!-- /footer -->
</div>
<script src="Scripts/jquery-2.0.2.js"></script>
<script>
</script>
<script src="Scripts/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.zh-TW.utf8.js"></script>
<script>
</script>
</body>
</html>
沒有留言:
張貼留言