BootStrap日歷插件

前端引入插件三大步驟

• 引入插件所需的資源文件

  <%--引入BootStrap日歷插件相關資源文件--%><%--按照資源文件相互依賴的順序來引入--%><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script><script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script><%--link標簽定義該頁面和引入的外部文件之間的關系--%><link type="text/css" rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"/><script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script><script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

• 創建容器

  <input type="text" id="mydate">

• 容器加載完成后，綁定容器調用相應函數

  <script type="text/javascript">$(function () {$("#mydate").datetimepicker({language:'zh-CN', // 語言設為中文format:'yyyy-mm-dd', // 日期格式minView:'month', // 可以選擇的最小視圖initialDate:new Date(), // 初始化顯示的日期autoclose:true, // 選擇完日期后是否自動關閉todayBtn:true, // 顯示‘今天’按鈕clearBtn:true // 清空按鈕})}) </script>

• 效果

BootStrap日歷插件官網

地址：DateTime Picker · Bootstrap (bootcss.com)

日歷詳細參數設置參考官方文檔！

總結

以上是生活随笔為你收集整理的BootStrap日历插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。