本文介绍下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
});