[简单]jQuery WdatePicker选择开始时间与结束时间例子

tinny

2014-06-05

如题，下面的是一个简单的使用jQuery WdatePicker选择开始时间和结束时间的例子，界面略丑,代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>选择开始时间和结束时间</title>
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../../js/wdatepicker/WdatePicker.js"></script>
<script>
	$(function() {
		$('#submitDiv').on('click', '#submitForm', function() {
			$("#resultDiv").html('');
			var begin_date = $.trim($('#begin_date').val());
			var end_date = $.trim($('#end_date').val());
			if (!begin_date) {
				$("#resultDiv").html("请选择开始时间").css("color", "red");
				return false;
			} else if (!end_date) {
				$("#resultDiv").html("请选择结束时间").css("color", "red");
				return false;
			}
			$('#dateForm').submit();
		});
	});
</script>
<style>
* {
	margin: 0px;
	padding: 0px;
}

body {
	text-align: center;
	margin: 0 auto;
}

table {
	margin: 0 auto;
}

table td {
	padding: 10px 20px;
	text-align: left;
}

.fixWidth {
	width: 120px;
}

#testDiv {
	margin: 0 auto;
	padding-top: 50px;
	border: 1px solid #7c7c7c;
	width: 800px;
	height: 200px;
	border: 1px solid #7c7c7c;
}

#submitDiv {
	margin-top: 20px;
	margin-bottom: 10px;
}

#submitDiv span {
	color: #fff;
	padding: 0px 20px;
}

#submitDiv a {
	background: #89D900;
	text-decoration: none;
}

#resultDiv {
	text-align: left;
	padding-left: 150px;
	margin-top: 20px;
	height: 40px;
	margin-top: 20px;
}
</style>
</head>
<body>
	<div id="testDiv">
		<div id="contentDiv">
			<form method="get" id="dateForm" action="">
				<table>
					<tr>
						<td><span>开始时间</span></td>
						<td><input type="text" id="begin_date" name="begin_date"
							class="Wdate fixWidth"
							onfocus="WdatePicker({startDate:'%y',dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'end_date\')}'})"></td>
						<td><span>结束时间</span></td>
						<td><input type="text" id="end_date" name="end_date"
							class="Wdate fixWidth"
							onfocus="WdatePicker({startDate:'%y',dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'begin_date\')}'})"></td>
					</tr>
				</table>
			</form>
		</div>
		<div id="submitDiv">
			<a id="submitForm" href="javascript:void(0);"> <span>查询</span></a>
		</div>
		<div id="resultDiv"></div>
	</div>
</body>
</html>

运行结果如下所示：

[简单]jQuery WdatePicker选择开始时间与结束时间例子
查询按钮美化：

#submitDiv span {
	color: #fff;
	background: #89D900;
	height: 35px;
	width: 110px;
	display: block;
	margin: 0 auto;
	line-height: 35px;
	font-weight: bold;
}

#submitDiv a {
	text-decoration: none;
}

结果如下：

[简单]jQuery WdatePicker选择开始时间与结束时间例子