日期控件中添加关闭按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQueryMobile - DateBox Demos</title>
<link rel="stylesheet" href="importFile/jquery.mobile-1.0.1.min.css" />
<link type="text/css" href="importFile/jquery.mobile.datebox.min.css" rel="stylesheet" />
<link type="text/css" href="importFile/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
<link type="text/css" href="importFile/demos.css" rel="stylesheet" />
<!-- NOTE: Script load order is significant! -->
<script type="text/javascript" src="importFile/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="importFile/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="importFile/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox.js"></script>
<script type="text/javascript" src="importFile/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript" src="importFile/extras.js"></script>
<script type="text/javascript" src="importFile/prettify.js"></script>
<link type="text/css" href="importFile/prettify.css" rel="stylesheet" />
</head>
<body>
<div data-role="page" data-theme="c" id="droIndex">
<div data-role="header">
<h1>jQueryMobile - DateBox</h1>
<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
</div>
<div data-role="content" data-theme="c">
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"mode": "datebox"}'>
<br>
<pre class="prettyprint">
无图标<DIV class=ui-datebox-header><H4>Uninitialized</H4></DIV>
有图标<DIV class=ui-datebox-gridlabel><H4>Uninitialized</H4></DIV>
</pre>
<br>
<br>
<br>
<DIV style="Z-INDEX: 500" class="ui-datebox-container ui-overlay-shadow ui-corner-all pop ui-body-b">
<DIV class=ui-datebox-header><H4>Unitialized</H4></DIV>
<DIV class=ui-datebox-controls jQuery16405565509423843716="29">
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="23"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN></SPAN></DIV>
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="25"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN></SPAN></DIV>
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="27"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN></SPAN></DIV></DIV>
<DIV class=ui-datebox-controls jQuery16405565509423843716="21"><INPUT class="ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-e" jQuery16405565509423843716="15"><INPUT class="ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-e" jQuery16405565509423843716="16"><INPUT class="ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-e" jQuery16405565509423843716="17"></DIV>
<DIV class=ui-datebox-controls jQuery16405565509423843716="30">
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="24"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-minus ui-icon-shadow"></SPAN></SPAN></DIV>
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="26"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-minus ui-icon-shadow"></SPAN></SPAN></DIV>
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="28"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-minus ui-icon-shadow"></SPAN></SPAN></DIV></DIV>
<DIV class=ui-datebox-controls><A class="ui-btn ui-btn-up-b ui-btn-icon-left ui-btn-corner-all ui-shadow" href="#" data-theme="b" jQuery16405565509423843716="22"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text>PlaceHolder</SPAN><SPAN class="ui-icon ui-icon-check ui-icon-shadow"></SPAN></SPAN></A>
</DIV>
</DIV>
<br>
<br>
<DIV style="Z-INDEX: 500" class="ui-datebox-container ui-overlay-shadow ui-corner-all pop ui-body-b" jQuery1640398674593630005="15">
<DIV class=ui-datebox-gridheader>
<DIV class="ui-datebox-gridminus ui-btn ui-btn-up-a ui-btn-inline ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="Previous Month" data-theme="a" jQuery1640398674593630005="17"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#">Previous Month</A></SPAN><SPAN class="ui-icon ui-icon-minus ui-icon-shadow"></SPAN></SPAN>
</DIV>
<DIV class="ui-datebox-gridplus ui-btn ui-btn-up-a ui-btn-inline ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="Next Month" data-theme="a" jQuery1640398674593630005="16"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#">Next Month</A></SPAN><SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN></SPAN>
</DIV>
<DIV class=ui-datebox-gridlabel><H4>Uninitialized</H4></DIV>
</DIV>
<DIV class=ui-datebox-grid></DIV>
<DIV class=ui-datebox-controls></DIV>
</DIV>
<br>
<br>
Modified
<br>
<DIV style="Z-INDEX: 500" class="ui-datebox-container ui-overlay-shadow ui-corner-all pop ui-body-b" jQuery1640398674593630005="15">
<DIV class=ui-datebox-gridheader>
<DIV class="ui-datebox-gridplus ui-btn ui-btn-up-a ui-btn-inline ui-btn-icon-notext ui-btn-corner-all ui-shadow" data-theme="a" jQuery1640398674593630005="16">
<SPAN class="ui-btn-inner ui-btn-corner-all">
<SPAN class=ui-btn-text><A href="#">Next Month</A></SPAN>
<SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN>
</SPAN>
</DIV>
<DIV class=ui-datebox-gridlabel><H4>Uninitialized</H4></DIV>
</DIV>
<DIV class=ui-datebox-grid></DIV>
<DIV class=ui-datebox-controls></DIV>
</DIV>
<br>
<br>
<DIV style="Z-INDEX: 500" class="ui-datebox-container ui-overlay-shadow ui-corner-all pop ui-body-b">
<DIV class=ui-datebox-gridheader>
<DIV class="ui-datebox-gridplus ui-btn ui-btn-up-a ui-btn-inline ui-btn-icon-notext ui-btn-corner-all ui-shadow" data-theme="a" jQuery1640398674593630005="16">
<SPAN class="ui-btn-inner ui-btn-corner-all">
<SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN>
</SPAN>
</DIV>
<DIV class=ui-datebox-gridlabel><H4>Uninitialized</H4></DIV>
</DIV>
</DIV>
<br>
<br>
Full
<br>
<DIV style="Z-INDEX: 500" class="ui-datebox-container ui-overlay-shadow ui-corner-all pop ui-body-b">
<DIV class=ui-datebox-gridheader>
<DIV class="ui-datebox-gridplus ui-btn ui-btn-up-a ui-btn-inline ui-btn-icon-notext ui-btn-corner-all ui-shadow" data-theme="a" jQuery1640398674593630005="16" onclick="alert('close')">
<SPAN class="ui-btn-inner ui-btn-corner-all">
<SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN>
</SPAN>
</DIV>
<DIV class=ui-datebox-gridlabel><H4>Uninitialized</H4></DIV>
</DIV>
<DIV class=ui-datebox-controls jQuery16405565509423843716="29">
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="23"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN></SPAN></DIV>
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="25"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN></SPAN></DIV>
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="27"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-plus ui-icon-shadow"></SPAN></SPAN></DIV></DIV>
<DIV class=ui-datebox-controls jQuery16405565509423843716="21"><INPUT class="ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-e" jQuery16405565509423843716="15"><INPUT class="ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-e" jQuery16405565509423843716="16"><INPUT class="ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-e" jQuery16405565509423843716="17"></DIV>
<DIV class=ui-datebox-controls jQuery16405565509423843716="30">
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="24"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-minus ui-icon-shadow"></SPAN></SPAN></DIV>
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="26"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-minus ui-icon-shadow"></SPAN></SPAN></DIV>
<DIV class="ui-btn ui-btn-up-a ui-btn-icon-bottom ui-btn-corner-all ui-shadow" data-theme="a" jQuery16405565509423843716="28"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text><A href="#"></A></SPAN><SPAN class="ui-icon ui-icon-minus ui-icon-shadow"></SPAN></SPAN></DIV></DIV>
<DIV class=ui-datebox-controls><A class="ui-btn ui-btn-up-b ui-btn-icon-left ui-btn-corner-all ui-shadow" href="#" data-theme="b" jQuery16405565509423843716="22"><SPAN class="ui-btn-inner ui-btn-corner-all"><SPAN class=ui-btn-text>PlaceHolder</SPAN><SPAN class="ui-icon ui-icon-check ui-icon-shadow"></SPAN></SPAN></A>
</DIV>
</DIV>
</div>
</div>
</html>