1.效果需求前一个input输入的日期不能大于后一个input输入的日期
页面效果:
2.html
//引入文件datetimepick插件
<link rel="stylesheet" href="/datatimepick/bootstrap-datetimepicker.min.css">
<script src="/Public/Static/datatimepick/bootstrap-datetimepicker.min.js"></script>
<script src="/Public/Static/datatimepick/bootstrap-datetimepicker.zh-CN.js"></script>
//页面
<div class="formDiv form-group">
<label class="col-sm-2 control-label" >* 活动时间</label>
<div class="col-sm-7" >
<div class=" date startD col-sm-5" data-date-format="yyyy-mm-dd" style="padding-left: 0;padding-right: 0;">
<input placeholder="请选择开始时间" name="SDate" class="form-control" id="SDate" size="18" type="text" value="" >
<span class="close">
![](/Public/Home/images/close.png)
</span>
</div>
<div class="fgf col-sm-2">——</div>
<div class=" date endD col-sm-5" data-date-format="yyyy-mm-dd hh:mm" style="padding-left: 0;padding-right: 0;">
<input placeholder="请选择结束时间" class="form-control" id="EDate" size="18" type="text" value="" >
<span class="close">
![](/Public/Home/images/close.png)
</span>
</div>
</div>
</div>
3.js
//初始化日期控件
$("#SDate").datetimepicker({
forceParse: true, //强制解析
language: 'zh-CN',
format: 'yyyy-mm-dd hh:ii', //日期格式
autoclose: true, //选完时间后自动关闭
todayBtn: false,
startView: 2, //日期选择器打开首先显示的视图0-时,1-天,2-月,3-年,4-十年
minView: 0, //最精确的时间:0-时,1-天,2-月,3-年,4-十年
maxView: 'decade', //最高能展示的时间
bootcssVer:3
}).on("click", function (ev) {
$("#SDate").datetimepicker("setEndDate", $("#EDate").val());
});
$("#EDate").datetimepicker({
forceParse: true,
language: 'zh-CN',
format: 'yyyy-mm-dd hh:ii ',
autoclose: true,
todayBtn: false,
startView: 2,
minView: 0,
maxView: 'decade',
bootcssVer:3
}).on("click", function (ev) {
$("#EDate").datetimepicker("setStartDate", $("#SDate").val());
});