先贴页面代码:
<li class="form-group " style="width:31%;position:relative;">
<label class="control-label" >开始时间:</label>
<div class="input-group date startTime" >
<input type="text" class="form-control" id="taskStartTime" name="taskStartTime" readonly placeholder = "Eg : 2017-01-01">
<span class="input-group-btn">
<button class="btn default" type="button" style="padding: 6px 12px;">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</li>
<li class="form-group " style="width:31%;margin-left: 30px;position:relative;" >
<label class="control-label" >结束时间:</label>
<div class="input-group date endTime" >
<input type="text" class="form-control" id="taskEndTime" name="taskEndTime" readonly placeholder = "Eg : 2017-01-01">
<span class="input-group-btn">
<button class="btn default" type="button" style="padding: 6px 12px;">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</li>
首先需要初始化datepicker
$("#todo-task-modal .input-group.date").datepicker({
startDate: new Date(),
format: "yyyy-mm-dd",
autoclose: true,
});
然后设置结束时间晚于开始时间:
//设置结束时间必须晚于开始时间
$(".startTime").datepicker().on('changeDate', function(e) {
//获取选取的开始时间
var endTimeStart =$("#taskStartTime").val();
//设置开始时间
$('.endTime').datepicker('setStartDate', endTimeStart);
});