bootstrap datepicker 时间控件 动态设置时间范围
需求:开始时间不能大于结束时间;结束时间不能小于开始时间
处理思路:
1、开始时间增加点击事件,设置最大时间(endDate)值为结束时间的值
2、同理结束时间增加点击事件,设置最小时间(startDate)值为结==开始时间的值
效果:
代码:
<label class="col-lg-1 col-md-2 control-label" style="width: 90px">统计周期:</label> <div class="col-lg-2 col-md-4"> <div class="input-group"> <input type="text" class="form-control input-sm" id="wdjxKssj" name="queryDate" readonly="readonly"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> </div> </div> <label class="col-lg-1 col-md-2 control-label" style="width: 5px;padding-left: 0px;">-</label> <div class="col-lg-2 col-md-4"> <div class="input-group"> <input type="text" class="form-control input-sm" id="wdjxJssj" name="queryDate" readonly="readonly"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> </div> </div>
function initWdjxCxsj(){ $('#wdjxKssj').datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight : true, startDate: new Date().getFullYear()+'-01-01', endDate : new Date() }).on("click",function(){ $("#wdjxKssj").datepicker("setEndDate",$("#wdjxJssj").val()) }); $('#wdjxJssj').datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight : true, startDate: new Date().getFullYear()+'-01-01', endDate : new Date() }).on("click",function(){ $("#wdjxJssj").datepicker("setStartDate",$("#wdjxKssj").val()) }); }