layui中laydate的使用——動態時間范圍設置

應用場景

需求分析

1. 發起時間的默認最大可選值為當前日期
2. 發起時間從，的最大可選日期為，發起時間至選中的日期
3. 發起時間至，的最小可選日期為，發起時間從選中的日期
4. 單擊重置時，發起時間從，發起時間至，的時間范圍限制恢復為默認情況，即清空動態變化

比如：當前時間為2018.08.31，發起時間從，發起時間至，默認最大可選日期為2018.08.31，如果發起時間從，選擇了2018.08.29，那么發起時間至，可選范圍變成29號到31號；如果發起時間至選擇了27號，那發起時間從的可選最大值不再是31號，而是變成27號

Html代碼

<form id="sch-form" class="layui-form layui-form-pane" lay-filter="sch-form" onsubmit="return false;">
<div class="layui-inline">
		<label class="layui-form-label">發起時間從</label>
		<div class="layui-input-block">
			<input name="beginTimeFrom" type="text" autocomplete="off" id="startTime" class="layui-input laydate">
		</div>
</div>
<div class="layui-inline">
		<label class="layui-form-label">發起時間至</label>
		<div class="layui-input-block">
			<input name="beginTimeTo" type="text" autocomplete="off" id="endTime" class="layui-input laydate">
		</div>
</div>
 
<div class="layui-btn-container" style="text-align: center;">
		<button class="layui-btn" lay-submit lay-filter="btn-sch" id="btn-sch" ><i class="icon-search"></i> 查詢</button>
		<button class="layui-btn layui-btn-primary" id="btn-resert"  ><i class="icon-undo"></i> 重置</button>
</div>
</form>

JS代碼

//日期   
    var nowTime=new Date();    
    var startTime=laydate.render({
    	elem:'#startTime',
    	type:'datetime',
    	btns: ['confirm'],
    	max:'nowTime',//默認最大值為當前日期
    	done:function(value,date){
//    		console.log(value); //得到日期生成的值，如：2017-08-18
//    	    console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    	    endTime.config.min={    	    		
    	    	year:date.year,
    	    	month:date.month-1,//關鍵
                date:date.date,
                hours:date.hours,
                minutes:date.minutes,
                seconds:date.seconds
    	    };
    	    
    	}
    })
    var endTime=laydate.render({
    	elem:'#endTime',
    	type:'datetime',
    	btns: ['confirm'],
    	max:'nowTime',
    	done:function(value,date){
//    		console.log(value); //得到日期生成的值，如：2017-08-18
//    	    console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}    	   
    	    startTime.config.max={
    	    		year:date.year,
        	    	month:date.month-1,//關鍵
                    date:date.date,
                    hours:date.hours,
                    minutes:date.minutes,
                    seconds:date.seconds
    	    }
    	    
    	}
    })
 
//重置
 $("#btn-resert").on("click",function(){
    		$("#sch-form")[0].reset(); 
    		endTime.config.min='1900-1-1';
    		startTime.config.max=endTime.config.max;
 })

注意事項

1. done回調函數中，month的設置必須-1，否則設置無效
2. reset()方法，只能使input輸入框清空，無法清空動態的時間限制
3. startTime.config.max=‘nowTime’不起作用
4. config.max或min方法中，可以根據實際需要選擇是否對時分秒進行設置
5. laydate默認的按鈕為：清空、現在、確定，在這里要將清空、現在按鈕取消，否則和時間范圍限制沖突，且只能通過修改源碼進行設置btns: ['confirm']只要確定按鈕

實現效果

參考：https://blog.csdn.net/cherry_11qianqian/article/details/82259704