要实现选择开始日期后,结束日期不能小于开始日期,并且选择结束日期后,开始日期不能大于结束日起的效果。如图
界面部分
<div class="pull-left input-w">
<span class="des pull-left">日期:</span>
<div class="input-append date time-box pull-left" id="mStartTimeDiv">
<input type="text" class="" id="StartTime" style="display:block;float:left;" />
<span class="add-on" style="display:block;float:left;margin-top:5px;"><i class="icon-th"></i></span>
</div>
<span class="pull-left time-seprate">-</span>
<div class="input-append date time-box" id="mEndTimeDiv">
<input type="text" class="" id="EndTime" style="display:block;float:left;" />
<span class="add-on" style="display:block;float:left;margin-top:5px;"><i class="icon-th"></i></span>
</div>
</div>
js部分
$("#mStartTimeDiv").datetimepicker({
language: 'zh-CN',
format: "yyyy-mm-dd",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
endDate: $("#end").val()
}).on('changeDate', function (ev) {
var startTime = $("#StartTime").val();
$("#mEndTimeDiv").datetimepicker("setStartDate", startTime.toString("yyyy-MM-dd"));
queryFunc();
});
$("#mEndTimeDiv").datetimepicker({
language: 'zh-CN',
format: "yyyy-mm-dd",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate: $("#start").val()
}).on('changeDate', function (ev) {
var endTime = $("#EndTime").val();
$("#mStartTimeDiv").datetimepicker("setEndDate", endTime.toString("yyyy-MM-dd"));
queryFunc();
});
引入js
<link href="~/datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="~/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="~/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>