bootstrap日期选择器

最新推荐文章于 2023-08-18 22:35:10 发布

(ღ星辰ღ)

最新推荐文章于 2023-08-18 22:35:10 发布

阅读量783

点赞数 1

分类专栏： js

原文链接：https://blog.csdn.net/gah7788/article/details/55520177

版权

js 专栏收录该内容

6 篇文章 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-mm-dd hh:ii', // 展现格式
				startDate : "2010-01-01",// 开始时间
				endDate : "2020-01-01", // 结束时间
				autoclose : true, // 选择日期后关闭
				// 选择器打开之后首先显示的视图
				// 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
				startView : 2,
				// 选择器所能够提供的最精确的时间选择视图
				// 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
				minView : 0,
				language : 'zh-CN', //显示语言为中文
			});
			
		});
	</script>
</body>
</html>

(ღ星辰ღ)

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
bootstrap日期选择器

效果图：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Bootstrap Datetimepicker</title><link href="http...
复制链接

扫一扫