bootstrap日期插件的使用

最新推荐文章于 2024-06-02 09:47:02 发布

给我瓶叶小白

最新推荐文章于 2024-06-02 09:47:02 发布

阅读量2.9k

点赞数 1

分类专栏： java web 文章标签： bootstrap日期插件 web日期插件

本文链接：https://blog.csdn.net/yjz_sdau/article/details/79810134

版权

java web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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>

给我瓶叶小白

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
bootstrap日期插件的使用

bootstrap日期插件，需要下载相应的bootstrap的css文件以及js文件。本例子使用了bootstrap样式，这样更好看。日期插件必要的四个引入：&lt;!-- 时间空间样式表 --&gt;&lt;link rel="stylesheet" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"&gt;...
复制链接

扫一扫

专栏目录