一、效果
使用jaDate日期控件：一個爲開始日期，另外一個爲結束日期，兩個日期之間建立相互約束關係。即開始日期不能大於結束日期，結束日期不能小於開始日期。
二、所需插件
三、代碼
注意：設置最小日期，以及設置最大日期 一定要精確到 時分秒。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<!-- jaDate插件 -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/jedate/jquery-1.7.2.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/jedate/jquery.jedate.js"></script>
<link type="text/css" rel="stylesheet"
href="${pageContext.request.contextPath }/jedate/skin/jedate.css">
</head>
<body>
<!-- 【自定義日期格式】 -->
<span class="wstxt">開始日期：</span>
<input type="text" class="workinput wicon" id="inpstart" readonly>
<span class="wstxt">結束日期：</span>
<input type="text" class="workinput wicon" id="inpend" readonly>
<script>
var start = {
format : 'YYYY-MM-DD',
minDate : '2014-06-16 23:59:59', //設定最小日期爲當前日期
isinitVal : false,
maxDate : $.nowDate({DD : 0}), //最大日期
// onClose:false,
okfun : function(obj) {
end.minDate = obj.val; //開始日選好後，重置結束日的最小日期
endDates();
}
};
var end = {
format : 'YYYY-MM-DD',
minDate : $.nowDate({DD : 0}), //設定最小日期爲當前日期
maxDate : '2099-06-16 23:59:59', //最大日期
// onClose:false,
okfun : function(obj) {
start.maxDate = obj.val; //將結束日的初始值設定爲開始日的最大日期
}
};
//這裏是日期聯動的關鍵
function endDates() {
//將結束日期的事件改成 false 即可
end.trigger = false;
$("#inpend").jeDate(end);
}
$('#inpstart').jeDate(start);
$('#inpend').jeDate(end);
//或者是
$.jeDate('#inpstart', start);
$.jeDate('#inpend', end);
</script>
</body>
</html>
四、參考網址
http://www.jemui.com/uidoc/jedate.html的開始日期與結束日期、日期聯動
