layUI 两个时间插件各为对方的最大值和最小值

layUI js

<script src="<%=basePath%>lib/layui/layui.js" charset="utf-8"></script>

日期控件

<div class="layui-inline layui-col-md12 x-so">
    <label class="layui-form-label">受理时间:</label>
    <input class="layui-input" placeholder="开始时间" id="start" readonly="readonly">
    <input class="layui-input" placeholder="结束时间" id="end" readonly="readonly">
    <button class="btn"><i class="layui-icon"></i></button>
</div>

js

<script type="text/javascript">
    layui.use(['layer', 'laydate'], function(){
    
    
        var laydate = layui.laydate;
        var layer = layui.layer;         
     	var start = laydate.render({
    
    
			elem: '#start',//制定元素
           	type: 'date',
           	theme: '#ff7e46',//主题颜色
          	min: '1900-1-1 00:00:00',
           	max: '2099-6-16 23:59:59',
           	trigger:'click',//定义鼠标悬停时弹出控件
           	done: function (value, date, endDate) {
    
    
	            if(value==""||value==null){
    
    
	             end.config.min = {
    
    
	                year: '1900',
	                month: '1',
	                date: '1',
	                hours: '00',
	                minutes: '00',
	                seconds: '00'
	             }; //开始日选好后,重置结束日的最小日期 
	            }else{
    
    
					end.config.min = {
    
    
		                year: date.year,
		                month: date.month - 1,
		                date: date.date,
		                hours: date.hours,
		                minutes: date.minutes,
		                seconds: date.seconds
	             	};
            	}
           } 
       });
       var end = laydate.render({
    
    
           elem: '#end',
           type: 'date',
           theme: '#ff7e46',
           min: '1900-1-1 00:00:00',
           max: '2099-6-16 23:59:59',
           trigger:'click',//定义鼠标悬停时弹出控件
           done: function (value, date, endDate) {
    
    
        	   if(value==""||value==null){
    
    
        		   start.config.max = {
    
    
					year:'2099',
	                month:'6',
	                date:'16',
	                hours:'23',
	                minutes:'59',
	                seconds:'59'
             		}; //结束日选好后,重置开始日的最大日期
            	}else{
    
    
					start.config.max = {
    
    
					   year: date.year,
					   month: date.month - 1,
					   date: date.date,
					   hours: date.hours,
					   minutes: date.minutes,
					   seconds: date.seconds
					};
            	}
           } 
       });
    });
    </script>

这样就OK了
上图看结果
在这里插入图片描述
这个时候可以看到六月八号之前是灰色的不可选
而空间中的readonly=“readonly” 属性就是防止用户直接在输入框中输入非法数据
这样就彻底解决问题了

Guess you like

Origin blog.csdn.net/c15162/article/details/118327970