BootStrap日歷插件

前端引入插件三大步驟

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

  <%--引入BootStrap日歷插件相關(guān)資源文件--%><%--按照資源文件相互依賴的順序來引入--%><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標(biāo)簽定義該頁面和引入的外部文件之間的關(guān)系--%><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>

• 創(chuàng)建容器

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

• 容器加載完成后，綁定容器調(diào)用相應(yīng)函數(shù)

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

• 效果

BootStrap日歷插件官網(wǎng)

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

日歷詳細(xì)參數(shù)設(shè)置參考官方文檔！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。