Bootstrap Datetimepicker（日期选择器）

Bootstrap-Datetimepicker：日期时间选择器

官方网站 http://www.bootcss.com/p/bootstrap-datetimepicker/

切记Datetimepicker有两帮派，上个图，注意搜索结果的前两个插件名称：

打开效果图：

Bootstrap Datetimepicker（日期选择器）

<!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', // 展现格式
				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>

秒客网

Bootstrap Datetimepicker（日期选择器）

相关文章