easyui的datebox限定范围

最新推荐文章于 2020-08-13 16:28:45 发布

jump_alang

最新推荐文章于 2020-08-13 16:28:45 发布

阅读量3.4k

点赞数 3

分类专栏： js 文章标签： easyui 前端 datebox

本文链接：https://blog.csdn.net/u012892787/article/details/47136439

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

偶然在一个前端技术交流群看到有人问：easyui的datebox组件，两个datebox，一个开始时间，一个结束时间，这两个时间间隔最大一个月，也就是说在选定了开始时间后，相应的结束时间有一部分要变成灰色的不可用？

突然心血来潮，于是各种百度，尝尽了各种方法终于找到解决方法，参考了：http://www.jeasyui.net/demo/344.html

现在贴代码：源代码下载地址请点击右边：点击打开链接

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Restrict Date Range in DateBox - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="easyui.css">
	<link rel="stylesheet" type="text/css" href="icon.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
	<script type="text/javascript" src="easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>DateBox 限定时间区域</h2>
	<p>这仅仅是一个demo.</p>
	<div style="margin:20px 0;"></div>
	<input id="dd" class="easyui-datebox"  data-options="editable:false"></input>
	<input id="dd1" class="easyui-datebox"  data-options="editable:false"></input>
	<input id="btn" type="button" value="获取第一个时间值"/>
	<input id="btn1" type="button" value="获取第二个时间值"/>
	<input id="submit" type="button" value="提交"/>
	<input id="clear" type="button" value="清空"/>
	<script>
		
		$(function(){
			$("#dd1").datebox({ disabled: true }); 
			$("#btn").click(function(){
				alert($("#dd").datebox("getValue"));
			})
			$("#btn1").click(function(){
				alert($("#dd1").datebox("getValue"));
			})
			
			$("#submit").click(function(){
				if($("#dd").datebox("getValue")=="" || $("#dd1").datebox("getValue") == ""){
					alert("请选择时间");
				}else{
					alert("提交成功!");
				}
			})
	
			$("#clear").click(function(	){
				$("#dd").datebox("setValue","");
				$("#dd1").datebox("setValue","");
			})
			
			$("#dd").datebox({
			onSelect:
				function(firstDate){
					$("#dd1").datebox({ disabled: false }); 
					//$("#dd1").datebox({
				//		editable:false
					//})
					$('#dd1').datebox().datebox('calendar').calendar({
						validator:function(date){
						var d1 = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate());
						var d2 = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate());
						d2.setMonth(d1.getMonth()+1);
						return d1<=date && date<=d2;
						}
					
					})
				}
			 });
		});
	</script>
</body>
</html>

jump_alang

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
easyui的datebox限定范围

偶然在一个前端技术交流群看到有人问：easyui的datebox组件，两个datebox，一个开始时间，一个结束时间，这两个时间间隔最大一个月，也就是说在选定了开始时间后，相应的结束时间有一部分要变成灰色的不可用？
复制链接

扫一扫