码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-08-18 14:25:38      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:put   form   on()   复制   fun   lis   tar   sheet   日期   

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
               });
         });
技术分享图片

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

标签:put   form   on()   复制   fun   lis   tar   sheet   日期   

原文地址:https://www.cnblogs.com/lsjBlog/p/9497099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!