bootstrap里加入日期控制元件
阿新 • • 發佈:2021-08-13
總統來說,關鍵是引用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>