Bootstrap时间选择器（选择年份）

最新推荐文章于 2024-05-08 23:49:10 发布

木辛MX

最新推荐文章于 2024-05-08 23:49:10 发布

阅读量7.7k

点赞数 3

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/qq_43190579/article/details/108997356

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bootstrap Datetimepicker</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="page-header">
					<h1>Bootstrap Datetimepicker <small>日期插件</small></h1>
					<h4>在Bootstrap下有两款日期插件,在下载时要注意区分。</h4>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3">
				<div class="form-group">
					<!-- readonly代表是否为禁用输入 -->
					<input id="date1ID" class="form-control" value="请选择年份" readonly>
				</div>
			</div>
			<div class="col-md-3">
		    	<div id="date2ID" class="input-group">
		      		<div class="input-group-addon">
						<i class="fa fa-clock-o" aria-hidden="true"></i>
					</div>
		      		<input id="dateID" class="form-control" value="请选择年份" readonly>
		      		<div class="input-group-addon">
		      			<i class="fa fa-calendar" aria-hidden="true"></i>
		      		</div>
		    	</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
	<script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	
	<script type="text/javascript">
		/* 第三步:初始化插件  */
		$(function() {
			$(".form-control").datetimepicker({
				format : 'yyyy', // 展现格式
				startDate : "2010",// 开始时间
				endDate : "2020", // 结束时间
				autoclose : true, // 选择日期后关闭
				// 选择器打开之后首先显示的视图
				// 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
				startView : 4,
				// 选择器所能够提供的最精确的时间选择视图
				// 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
				minView : 4,
				language : 'zh-CN', //显示语言为中文
			});
			
		});
	</script>
</body>
</html>

实现效果：
在这里插入图片描述

木辛MX

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
Bootstrap时间选择器（选择年份）

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Bootstrap Datetimepicker</title><link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel=
复制链接

扫一扫

专栏目录