jaDate日期控件开始日期与结束日期、日期联动

素颜马尾好姑娘i 2022-05-28 03:18 393阅读 0赞

# 一、效果 #

使用jaDate日期控件：一个为开始日期，另外一个为结束日期，两个日期之间建立相互约束关系。即开始日期不能大于结束日期，结束日期不能小于开始日期。

![20180328165635219][]

# 二、所需插件 #

![20180328170123146][]

# 三、代码 #

注意：设置最小日期，以及设置最大日期 一定要精确到 时分秒。

<%@ 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>
    
    <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的开始日期与结束日期、日期联动

![Image 1][] ![Image 1][] ![Image 1][]

[20180328165635219]: /images/20220528/fd17285da714497e87065f9b2f9f07b1.png
[20180328170123146]: /images/20220528/a6f7a97268a444e9aa4cf40506353c16.png
[Image 1]: