日历
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="gbk">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile-1.1.1.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox2/css/demos.css" rel="stylesheet" />
<link href="css/jqm-datebox-1.1.0.comp.calbox.css" rel="stylesheet" type="text/css" />
<!-- NOTE: Script load order is significant! -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.1.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.comp.calbox.js" type="text/javascript"></script>
<script src="js/jquery.mobile.subpage.js" type="text/javascript"></script>
<script>
window.location.href = "page-template.html";
</script>
</head>
<body>
<div data-role="page" >
<div class="content-primary"> <div data-role="collapsible-set" data-mini="true" data-theme="c" data-content-theme="d"> <div data-role="collapsible" data-collapsed="false"> <h3> Modes Available</h3> <div data-role="fieldcontain"> <label for="mode2"> 设置日期</label> <input name="mode2" id="mode2" type="text" data-role="datebox" data-options='{"mode":"calbox", "useNewStyle":true}' /> </div> </div> </div> </div>
</div>
</div>
</body>
</html>
执行效果代码: