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
               });
         });
复制代码

猜你喜欢

转载自www.cnblogs.com/lsjBlog/p/9497099.html