easyui的datebox限定范围

来源：互联网发布：mac怎样新建文件夹编辑：程序博客网时间：2024/05/17 02:01

偶然在一个前端技术交流群看到有人问：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>

1 0