ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围

下载地址：http://jqueryui.com/download，Theme选择Sunny
界面代码：

 
<form id="form1" runat="server"> 
 
<div align="center"> 
 
<fieldset style="width: 400px; height: 150px"> 
 
<table border="0" cellpadding="3" cellspacing="3"> 
 
<tr> 
 
<td colspan="2"> 
 
请输入日期范围： 
 
</td> 
 
</tr> 
 
<tr> 
 
<td> 
 
开始时间： 
 
</td> 
 
<td> 
 
<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td> 
 
结束时间： 
 
</td> 
 
<td> 
 
<asp:TextBox ID="txtEndDate" runat="server"></asp:TextBox> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td colspan="2"> 
 
<asp:Button ID="btnSubmit" runat="server" Text="提交" />&nbsp;<asp:Button ID="btnReset" runat="server" 
 
Text="重置" /> 
 
</td> 
 
</tr> 
 
</table> 
 
</fieldset> 
 
</div> 
 
</form>

脚本代码：

复制代码代码如下:

 
<head id="Head1" runat="server"> 
 
<title>Recipe14</title> 
 
<link rel="Stylesheet" href="Styles/sunny/jquery-ui-1.8.17.custom.css" /> 
 
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script> 
 
<script type="text/javascript" src="Scripts/jquery-ui-1.8.17.custom.min.js"></script> 
 
<script type="text/javascript"> 
 
$(function () { 
 
$("#txtStartDate").datepicker(); 
 
$("#txtEndDate").datepicker(); 
 
$("#btnSubmit").click(function (e) { 
 
e.preventDefault(); 
 
var startdate = Date.parse($("#txtStartDate").val()); 
 
var enddate = Date.parse($("#txtEndDate").val()); 
 
if (startdate > enddate) { 
 
alert("开始时间不能大于结束时间!"); 
 
} 
 
}); 
 
$("#btnReset").click(function (e) { 
 
e.preventDefault(); 
 
$("#txtStartDate").val(""); 
 
$("#txtEndDate").val(""); 
 
}); 
 
}); 
 
</script> 
 
</head>

最终界面：

频道导航

ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围

您可能感兴趣的文章: