1.HTML代码:
<div class="col-sm-5 timegroup">
<label class="control-label">推送时间:</label>
<input size="10" type="text" name="startDate" id="startDate" class="form-control" placeholder="开始时间" style="display: inline-block; width: 30%;">
<span class="add-on" style="display: none"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-calendar"></i></span>
<span class="time">至</span>
<input size="10" type="text" name="endDate" id="endDate" class="form-control" placeholder="结束时间" value="" style="display: inline-block; width: 30%;">
<span class="add-on" style="display: none"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
2.JS代码:
//时间控件
$('#startDate,#endDate').datetimepicker({
minView: 'month',
format: 'yyyy-mm-dd',
language: 'ch',
autoclose: true,
todayBtn: true,
startView: 2
});
//开始日期
$('#startDate').on('changeDate', function() {
$('#endDate').datetimepicker('setStartDate', $('#startDate').val());
if($('#startDate').val() == "" && $("#startDate").next().css('display') == 'inline-block') {
$("#startDate").next().css('display', 'none');
} else {
$("#startDate").next().css('display', 'inline-block');
}
});
//结束日期
$('#endDate').on('changeDate', function() {
$('#startDate').datetimepicker('setEndDate', $('#endDate').val());
if($('#endDate').val() == "" && $("#endDate").next().css('display') == 'inline-block') {
$("#endDate").next().css('display', 'none');
} else {
$("#endDate").next().css('display', 'inline-block');
}
});