bootstrap里加入日期控件

总统来说，关键是引用js 和 css，尤其是那些cdn的公网加速后的js和css，包括jquery和datetimepicker.css,本地化时间格式的js，datetimepicker.js

一、jsp页面 引入 js

<% pageContext.setAttribute("APP_PATH", request.getContextPath()); %>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap-theme.css"     rel="stylesheet">
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.css"    rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script    src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

其中带$APP_PATH的，都是之前引用的，不是必须。

二、在jsp页面，书写html的标签，我用到了4次控件。所以写了4个。

<div class="form-group">
            <form  id="formpicker1" action="countHitsDate"   class="form-horizontal">
            <label>选择开始日期：</label>

            <!--指定 date标记-->

            <div class='input-group date' id='datetimepicker1'>

                <input type='text' name="begin" class="form-control" id='inputpicker1' />

                <span class="input-group-addon">

                    <span class="glyphicon glyphicon-calendar"></span>

                </span>

            </div>
            
            <br/>
                         <label>选择结束日期：</label>

            <!--指定 date标记-->

            <div class='input-group date' id='datetimepicker2'>

                <input type='text' name="end" class="form-control" id="inputpicker2" />

                <span class="input-group-addon">

                    <span class="glyphicon glyphicon-calendar"></span>

                </span>

            </div>
            
            <br>
            <button type="submit" id="countDate" class="btn btn-primary" formmethod="post" style="margin-right:15px"    >统计</button>
           
              <label style="margin-right:5px;">
                <input type="radio" name="coming" id="all" value="all" <c:if test="${radiopicker1=='all'}">checked</c:if> >        全部
              </label>
            
              <label style="margin-right:5px;">
                <input type="radio" name="coming" id="wx" value="wx" <c:if test="${radiopicker1=='wx'}">checked</c:if>>
                wx
              </label>
            
              <label>
                <input type="radio" name="coming" id="pc" value="pc" <c:if test="${radiopicker1=='pc'}">checked</c:if>>
                pc
              </label>
            
            </form>
        </div>
        

<h4><span class="label label-default"><c:out value="${tipsDate }"></c:out></span></h4>
<hr>
<br>
        <div class="form-group">
            <form id="formpicker1"  class="form-horizontal" action="countHitsTime">
            <label>选择开始日期+时间：</label>

            <!--指定 date标记-->

            <div class='input-group date' id='datetimepicker3'>

                <input type='text' name="begin" class="form-control" id="inputpicker3" />

                <span class="input-group-addon">

                    <span class="glyphicon glyphicon-calendar"></span>

                </span>

            </div>
            
            <br/>
            <label>选择结束日期+时间：</label>

            <!--指定 date标记-->

            <div class='input-group date' id='datetimepicker4'>

                <input type='text' name="end" class="form-control" id="inputpicker4" />

                <span class="input-group-addon">

                    <span class="glyphicon glyphicon-calendar"></span>

                </span>

            </div>
            
            <br>
            <button type="submit" id="countTime" class="btn btn-primary"     formmethod="post"  style="margin-right:15px"  >统计</button>
           <label style="margin-right:5px;">
                <input type="radio" name="coming" id="all" value="all" <c:if test="${radiopicker2=='all'}">checked</c:if>>
                全部
              </label>
            
              <label style="margin-right:5px;">
                <input type="radio" name="coming" id="wx" value="wx" <c:if test="${radiopicker2=='wx'}">checked</c:if>>
                wx
              </label>
            
              <label>
                <input type="radio" name="coming" id="pc" value="pc" <c:if test="${radiopicker2=='pc'}">checked</c:if>>
                pc
              </label>
            
           
            </form>
            
        </div>
        <h4><span class="label label-default"><c:out value="${tipsTime }"></c:out></span></h4>
    </div>

    

    </div>
    

三、 书写加载脚本，我引用了4个控件，所以加载了4次。

<script type="text/javascript">

  
  $(function(){

        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
          
        });

       $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
          
        });
        
        $('#datetimepicker3').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            locale: moment.locale('zh-cn'),
          
        });

       $('#datetimepicker4').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            locale: moment.locale('zh-cn'),
          
        });
    })
 



</script>

标签：控件,checked,cn,locale,bootstrap,js,日期,zh,datetimepicker
来源： https://www.cnblogs.com/sdgtxuyong/p/15138670.html