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

本文链接：https://blog.youkuaiyun.com/a15920804969/article/details/79730274

本文介绍如何使用jaDate插件实现开始日期与结束日期之间的联动功能，确保开始日期不会晚于结束日期，反之亦然。通过精确设置最小和最大日期，实现了日期选择的有效约束。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果

使用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>