当前位置: 首页 > 工具软件 > DateBox > 使用案例 >

EasyUi 日历组件 datebox 开始时间与结束时间限制高级版

令狐嘉运
2023-12-01
         说明:只有选了开始日期才能选择结束日期,当选择了结束日期又重新选择了开始日期,则需要重新选择结束日期。结束日期只能选择开始时间后的日期。例如开始时间为:2015-07-15,那么结束时间只能选择 2015-07-15至当前系统时间。(简单版请参考: http://blog.csdn.net/meguoe/article/details/47168179

 

<input id="startdate" 	class="easyui-datebox" name="startdate" data-options="prompt:'请选择开始日期',editable:false,required:'true',onSelect:onSelect">
<input id="enddate"	class="easyui-datebox" name="enddate"   data-options="prompt:'请选择结束日期',editable:false,required:'true',disabled:true,validType:'equaldDate[\'#startdate\']'">
<pre class="javascript" name="code"><script>
	function onSelect(date){  //开始日期选择时触发
		$('#enddate').datebox('enable');	//启用结束日期控件
		$('#enddate').datebox('reset')		//重置结束日期的值
	};
	$.extend($.fn.validatebox.defaults.rules, {
		equaldDate: {
			validator: function(value, param){
				var d1 = $(param[0]).datetimebox('getValue');  //获取开始时间
				return value >=d1;  //有效范围为大于开始时间的日期
			},
			message: '结束日期不能早于开始日期!'
		}
	});
	$(function(){
		//只能选择今日前365天的日期
		$('#startdate').datebox('calendar').calendar({
			validator: function(date){
				var now = new Date();
				var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
				var d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate()-365);
				return d1>=date && date>=d2;
			}
		});	
		//只能选择startdate至当前系统时间的日期。	
		$('#enddate').datebox('calendar').calendar({
			validator: function(date){
				var now = new Date();
				var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
				var d2 = $('#startdate').datebox('getValue'); 
			     // var d2 = "2015-07-30";  //如果指定了一个日期一切正常
				var d3 = new Date(Date.parse(d2.replace(/-/g,"/")));   //需要切换一下其他月才能生效(需要修复一下)
				return d1>=date && date>=d3;
			}
		});	
	});
</script>
 类似资料: