• 2024-02-27
宇哥博客 前端开发 laydate设置开始日期/结束日期控制

laydate设置开始日期/结束日期控制

laydate插件日期范围选择可使用range,效果如下图:

日期范围选择

下面是对于两个独立的日期选项,做日期范围控制。

本文使用的是layDate5.0.9日期时间控件。

代码:

<input type="text" placeholder="开始日期" style="width: 100px;" id="zz_date_1" readonly="readonly">

<input type="text" placeholder="结束日期" style="width: 100px;" id="zz_date_2" readonly="readonly">

<script type="text/javascript">
	  	//开始日期
	  	let zz_date1 = laydate.render({
	    	elem: '#zz_date_1',
	    	done:function(value,date){
	    		zz_date2.config.min={    	    		
	    	    	year: date.year,
	    	    	month: date.month-1,//关键
	                date: date.date
	    	    };
	    	}
	  	});
		//结束日期
	  	let zz_date2 = laydate.render({
	    	elem: '#zz_date_2',

	    	done:function(value,date){
	    		if(value == ''){
	    			date = {year: '9999', month: '12', date: '31'};
	    		}
	    		zz_date1.config.max={    	    		
	    	    	year: date.year,
	    	    	month: date.month-1,//关键
	                date: date.date
	    	    };
	    	}
	  	});
</script>

选择结束日期完成的动作,需要加上是否选择了日期的判断,否则开始日期将无法选择任何日期。

本文来自网络,不代表本站立场,转载请注明出处。http://www.ygbks.com/4032.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

1条评论

返回顶部