bootstrap的日期時間外掛
阿新 • • 發佈:2018-12-14
效果圖展示:
1)html程式碼
<div class="row"> <div class="col-xs-2"> <label class="control-label">釋出截止日期:</label> </div> <div class="col-xs-4 updateP1"> <input type="text" id="abortDate" name="abortDate" class="form-control" value=""> </div> </div>
2)需要依賴static/bootstrap-3.3.7-dist/datepicker
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static /bootstrap-3.3.7-dist/datepicker/css/bootstrap-datetimepicker.min.css" /> <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/datepicker /js/bootstrap-datetimepicker.min.js"></script> <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/datepicker /js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
3)js呼叫datetimepicker方法
<script> //時間函式 function getCurrDate(){ var d = new Date(); return d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" " +d.getHours()+":"+d.getMinutes()+":"+d.getSeconds(); } //入口函式 $(function(){ //時間外掛 $("#abortDate").datetimepicker({ language:"zh-CN",//漢化 todayBtn:1,//返回當前時間的button format:"yyyy-mm-dd hh:ii:ss",//顯示時間的格式 //minView:"month"//只顯示月曆 }); //時間val值,獲取當前時間 $("#abortDate").val(getCurrDate()); }); </script>
就可以啦!