Java中bootstrap-datetimepicker时间插件的使用

Posted 2020-12-30 Code_World_Final

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
               });
         });