天天看点

layui时间选择框,选择时间段

在web前端input,时间组件很常用,最近在使用layui的时间组件时,想用一个时间段,让后面的时间必须大于前面的时间

<div class="layui-col-xs8">
	 <div class="layui-inline">
							  	<label for="u_phone">下注时间 ≥:</label>
							        <div class="layui-input-inline">
							              <input type="text" name="start_time" class="layui-input" id="start_time" placeholder="开始时间(修改时间)">
							        </div>
							    </div>
							    -
							    <div class="layui-inline">
							        <div class="layui-input-inline">
							            <input type="text" name="end_time" class="layui-input" id="end_time"  placeholder="结束时间(修改时间)">
							        </div>
							    </div>
						    </div>
           
<script type="text/javascript" src="../layui/layui.js"></script>
           
<script type="text/javascript">
		layui.use([ 'laydate'], function(){
		    var $ = layui.$;
		    var laydate = layui.laydate;
		    var nowTime = new Date().valueOf();
		    var max = null;
		
		    var start = laydate.render({
		        elem: '#start_time',
		        type: 'datetime',
		        format:'yyyy/MM/dd',
		        max: nowTime,
		        btns: ['clear', 'confirm'],
		        done: function(value, date){
		            endMax = end.config.max;
		            end.config.min = date; //最大时间为结束时间的开始值
		            end.config.min.month = date.month -1;
		        }
		    });
		    
		    var end = laydate.render({
		        elem: '#end_time',
		        type: 'datetime',
		        max:  4073558400000,
		        format:'yyyy/MM/dd',
		        min:nowTime,
		        done: function(value, date){
		            if($.trim(value) == ''){
		                var curDate = new Date();
		                date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
		            }
		            start.config.max = date;//最小时间为开始时间的最大值
		            start.config.max.month = date.month -1;
		        }
		    })
		 })
	</script>