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

最新推荐文章于 2024-05-30 14:01:02 发布

四月的萤火之光

最新推荐文章于 2024-05-30 14:01:02 发布

阅读量3.8k

点赞数

分类专栏： html+css+javascript(jquery) 文章标签：日期控件

本文链接：https://blog.csdn.net/a15920804969/article/details/79730274

版权

html+css+javascript(jquery) 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、效果

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

四月的萤火之光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jaDate日期控件开始日期与结束日期、日期联动

一、效果使用jaDate日期控件：一个为开始日期，另外一个为结束日期，两个日期之间建立相互约束关系。即开始日期不能大于结束日期，结束日期不能小于开始日期。二、所需插件二、代码dADASF<% String path = request.getContextPath(); String basePath = request.get
复制链接

扫一扫