bootstrap日期插件的使用示例

本文介绍下bootstrap日期插件的使用。注意：从官网下载的demo可能由于浏览器问题不兼容，可以通过多个浏览器尝试。

1、在jsp文件中需要引入bootstrap-datetimepicker.min.css/bootstrap-datetimepicker.min.js/bootstrap-datetimepicker.zh-CN.js三个文件（当然需要先引入jquery/bootstrap相关的文件）

<script type="text/javascript"
	src="<%=request.getContextPath()%>/resources/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/resources/js/menu.js"></script>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript"
	src="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- 添加对日期空间的插件 -->
<link rel="stylesheet" charset="UTF-8" href="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/css/bootstrap-datetimepicker.min.css" >
<script type="text/javascript" charset="UTF-8" src="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="<%=request.getContextPath()%>/resources/bootstrap/3.3.4/js/bootstrap-datetimepicker.zh-CN.js"></script>

2、编写日期标签：

<div class="row">
					<div class="form-group">
						<label for="birthday" class="col-xs-1 control-label">生日</label>
						<div class="col-xs-8">
							<div class="input-group date form_date col-md-3" data-date="" data-date-format="yyyy年mm月dd日" data-link-field="dtp_input2" data-link-format="yyyy年mm月dd日" >
								<sf:input id="birthday" size="16" path="birthday" readonly="true"/>
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
							<!-- <input type="hidden" id="dtp_input2" value="" /><br/> -->
						</div>
						<div class="col-xs-3">
							<sf:errors path="birthday"></sf:errors>
						</div>
					</div>
				</div>

3、编写js脚本文件：

$('.form_date').datetimepicker({
            language:  'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });