1 基本引入
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<引入样式 Bootstrap ${pageContext.request.contextPath } -->
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<!--引入jquery static/js/jquery-1.12.4.min.js -->
<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
<!--引入js Bootstrap -->
<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2 显示
3 日期控件
3.1 引入
3.2 Html
3.3 Js
3.4 Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 1.基本:引入样式 Bootstrap ${pageContext.request.contextPath } -->
<link rel="stylesheet"href="static/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet"href="static/bootstrap-datepicker-master/dist/css/bootstrap-datepicker.min.css"/>
</head>
<body>
<div class="col-xs-4">
<div class="input-groupinput-daterange">
<div class="input-group-addon">注册时间</div>
<input type="text" class="form-control" id="beginDate">
<div class="input-group-addon">至</div>
<input type="text" class="form-control" id="endDate">
</div>
</div>
<div class="col-xs-12">
</div>
<div class="col-xs-3">
<div class="input-groupdate">
<div class="input-group-addon">出生日期</div>
<input type="text" class="form-control" id="birthday">
<div class="input-group-addon">
<span class="glyphiconglyphicon-th"></span>
</div>
</div>
</div>
<!-- 1.基本:引入jquery static/js/jquery-1.12.4.min.js -->
<script type="text/javascript"src="static/js/jquery-1.12.4.min.js"></script>
<!-- 1.基本:引入js Bootstrap -->
<script type="text/javascript"src="static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"src="static/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.js"></script>
<script type="text/javascript"src="static/bootstrap-datepicker-master/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript">
//格式化时间控件
$('#beginDate').datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd'
});
$('#endDate').datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd'
});
$('#birthday').datepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
});
</script>
</body>
</html>
官网:http://bootstrap-datepicker.readthedocs.io/en/latest/index.html
4 日期时间
4.1 引入
官网:
http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
5 其他控件