<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bootstrap Datetimepicker</title>
<link href="https://cdn.bootcss/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss/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/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdn.bootcss/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>
实现效果:
更多推荐
Bootstrap时间选择器(选择年份)
发布评论