转载地址
https://www.cnblogs.com/dazhangli/p/9002329.html
引入文件的说明
相关的事件的写法
具体写法
首先使用日期控件(默认前提引入了Bootstrap框架的js和css)
- 引入css文件
<!-- Bootstrap -->
<link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstrap/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstrap/css/bootstrap-datetimepicker.min.css">
- 引入js文件
<#--bootstrap日期控件-->
<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datepicker.min.js"></script>
<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datepicker.zh-CN.min.js"></script>
- html页面
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_start">时间区间</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type="text" class="form-control" name="start" id="search_start" placeholder="开始时间"/>
<span class="input-group-addon">到</span>
<input type="text" class="form-control" name="end" id="search_end" placeholder="结束时间"/>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary" id="search">查询</button>
<button type="button" class="btn btn-default" id="reset">重置</button>
</div>
</div>
</div>
</form>
- js写法
<script>
$(function() {
/*表单验证*/
/*加载日期控件*/
$("#search_start").datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 'linked',
clearBtn: true,
todayHighlight: true,
autoclose: true
}).on('changeDate', function (e) {
var startTime = e.date;
$("#search_end").datepicker('setStartDate', startTime);
});
$("#search_end").datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 'linked',
clearBtn: true,
todayHighlight: true,
autoclose: true
}).on('changeDate', function (e) {
var endTime = e.date;
$("#search_start").datepicker('setEndDate', endTime);
});
$('.input-date').datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 'linked',
clearBtn: true,
todayHighlight: true,
autoclose: true
}).on('hide', function (e) {
e.stopPropagation();//防止日期选择框关闭时引发模态框的关闭
});
//=====================当日期控件在模态框中的时候==========================
//这个时候需要再引入jquery-latest.js
$('.end-date').datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 'linked',
clearBtn: true,
startDate: new Date(),
todayHighlight: true,
autoclose: true
}).on('hide', function (e) {
e.stopPropagation();//防止日期选择框关闭时引发模态框的关闭
});
});
</script>