bootstrap日期插件,需要下载相应的bootstrap的css文件以及js文件。
本例子使用了bootstrap样式,这样更好看 。日期插件必要的四个引入:
<!-- 时间空间样式表 -->
<link rel="stylesheet"
href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<!--jquery文件-->
<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>
<!-- 时间空间日期格式js -->
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"
type="text/javascript"></script>
<script
src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
type="text/javascript"></script>
jquery文件是必不可少的。是基础依赖。
当然,在使用bootstrap插件时候,我们同样也要使用其修饰样式,那顺便也把基础样式引用导入
<!-- 基本bootstrap样式文件 -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<!--jquery文件-->
<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript"
src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
外联式引用css以及js到这里,还要初始化日期表
<script type="text/javascript">
//初始化标签,配置日期格式插件相关参数
$(function() {
$(".form_datetime").datetimepicker({
format : 'yyyy-mm-dd',
minView : 'month',
language : 'zh-CN',
autoclose : true,//选中自动关闭
startDate : '1900-01-01',
todayBtn : true
//显示今日按钮
});
});
</script>
然后是使用bootstrap样式,在body标签显示:(我的加了很多样式)
<div class="container">
<form class="form-horizontal col-sm-offset-3" id="registerform"
method="post" action="userServlet?action=register">
<div class="form-group">
<label for="birthday" class="col-sm-2 control-label">生日:</label>
<div class="col-sm-4">
<div class="input-group date form_datetime"
data-date-format="dd-MM-yyyy" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" name="birthday"
id="birthday" value="2000-01-01" readonly> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-remove"></span>
</span> <span class="input-group-addon"> <span
class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
</div>
</form>
</div>
这个页面展示:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="<%=basePath%>">
<title>日期</title>
<!-- 基本bootstrap样式文件 -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<!-- 时间空间样式表 -->
<link rel="stylesheet"
href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<!--jquery文件-->
<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript"
src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<!-- 时间空间日期格式js -->
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"
type="text/javascript"></script>
<script
src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
type="text/javascript"></script>
<script type="text/javascript">
//初始化标签,配置日期格式插件相关参数
$(function() {
$(".form_datetime").datetimepicker({
format : 'yyyy-mm-dd',
minView : 'month',
language : 'zh-CN',
autoclose : true,//选中自动关闭
startDate : '1900-01-01',
todayBtn : true
//显示今日按钮
});
});
</script>
</head>
<body>
<div class="container">
<form class="form-horizontal col-sm-offset-3" id="registerform"
method="post" action="userServlet?action=register">
<div class="form-group">
<label for="birthday" class="col-sm-2 control-label">生日:</label>
<div class="col-sm-4">
<div class="input-group date form_datetime"
data-date-format="dd-MM-yyyy" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" name="birthday"
id="birthday" value="2000-01-01" readonly> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-remove"></span>
</span> <span class="input-group-addon"> <span
class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
</div>
</form>
</div>
</body>
</html>