1. 測試環境
win7
JQuery-3.2.1.min.js
下載地址：
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
Bootstrap-3.3.7-dist
下載地址：
https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip
bootstrap-table-develop-v1.12.1.zip
下載地址：
https://github.com/wenzhixin/bootstrap-table
https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-table-develop-v1.12.1.zip
bootstrap-datetimepicker-master-v4.17.47.zip
下載地址：
https://github.com/Eonasdan/bootstrap-datetimepicker
1.2. 配置與應用
效果展示
HTML代碼片段
head設置
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->{% load staticfiles %}<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --><script type="text/javascript" src="{% static 'website/jquery-3.2.1.min.js' %}" defer></script><!-- Bootstrap --><link rel="stylesheet" type="text/css" href="{% static 'website/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="external nofollow" /><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><script type="text/javascript" src="{% static 'website/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}" defer></script><!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --><!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" defer></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" defer></script><![endif]--> ……略<!-- bootstrap-datetimepicker --><link rel="stylesheet" href="{% static 'website/bootstrap-datetimepicker-4.17.47/css/bootstrap-datetimepicker.min.css' %}" rel="external nofollow" /><script type="text/javascript" src="{% static 'website/bootstrap-datetimepicker-4.17.47/js/bootstrap-datetimepicker.min.js' %}" defer></script><!-- 引入中文語言包，注意：locale files 必須放在bootstrap-datetimepicker.min.js后面 --><script type="text/javascript" src="{% static 'website/bootstrap-datetimepicker-4.17.47/js/locales/bootstrap-datetimepicker.zh-CN.js' %}" defer></script> ……略 </head>toolbar工具條
<div class="container-fluid"><div class="row"><table id="roleTable"></table><div id="toolbar"><div class="btn-group"><button class="btn btn-default" data-toggle="modal" data-target="#roleDialog" id="addBtn">新增<i class="glyphicon glyphicon-plus"></i></button><button class="btn btn-default" id="editBtn">修改<i class="glyphicon glyphicon-edit"></i></button><button class="btn btn-default" id="deleteBtn">刪除<i class="glyphicon glyphicon-remove"></i></button></div><form class="form-inline" id="queryForm"><div class="form-group"><div class="input-group"><div class="input-group-addon">角色名稱</div><input type="text" class="form-control" name="roleNameQ" id="roleNameQ" placeholder="請輸入角色名稱"></div><div class="input-group date" id="startTimePicker"><div class="input-group-addon">開始時間</div><input type="text" class="form-control" name="startTime" id="startTime" ><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div><div class="input-group date" id="endTimePicker"><div class="input-group-addon">結束時間</div><input type="text" class="form-control" name="endTime" id="endTime"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div><button type="button" id="queryBtn" class="btn btn-primary queryButton">查詢</button></form></div></div></div>
JS代碼片段
時間插件配置
// 設置開始時間插件$('#' + startTimePickerID).datetimepicker({language: 'zh-CN',// 默認值: 'en'，設置控件上的文案為中文format:'yyyy-mm-dd HH:mm:ss', //格式化，以便精確到秒autoclose:true // 選擇時間時，點擊分后，關閉時間插件框});// 設置結束時間插件$('#' + endTimePickerID).datetimepicker({language: 'zh-CN',format:'yyyy-mm-dd HH:mm:ss',autoclose: true // 選擇時間時，點擊分后，關閉時間插件框}});總結
以上所述是小編給大家介紹的Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應用小結,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
