Java中bootstrap-datetimepicker时间插件的使用
1、引入时间插件所需要的js和css
<script type="text/javascript" src="<%=path %>/static/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script> <script type="text/javascript" src="<%=path %>/static/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
1
|
<link href= "<%=path %>/static/css/bootstrap-datetimepicker.min.css" rel= "stylesheet" media= "screen" > |
对于日期插件我们一般会使用两种日期,一种是日期,另一种是时间
2.1 日期的使用方式
<div class="form-group"> <label class="col-sm-2 control-label" >用户到期:<font size="2" color="red">*</font></label> <div class="col-sm-4"> <div class="input-group date form_date col-md-5" style="padding-left:0px;padding-right:0px;"> <input class="form-control" type="text" id="suExpire1" name="suExpire1" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <label class="error" for="suExpire1"></label> </div> <label class="col-sm-2 control-label" >密码到期:<font size="2" color="red">*</font></label> <div class="col-sm-4"> <div class="input-group date form_date col-md-5" style="padding-left:0px;padding-right:0px;"> <input class="form-control" type="text" id="supwExpire1" name="supwExpire1" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <label class="error" for="supwExpire1" ></label> </div> </div>
//年-月-日 $(function(){ $(".form_date").datetimepicker({ language: 'zh-CN', format: 'yyyy-mm-dd', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); });
2.2 时间的使用方式
<label>发布日期:</label><font size="1" color="red">*</font> <div class="input-group date form_datetime col-md-5" style="padding-left:0px;padding-right:0px;"> <input class="form-control input-sm" type="text" id="publishDate1" name="publishDate1" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div>
//年-月-日 时:分:秒 $(function(){ $('.form_datetime').datetimepicker({ language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1 }); });