bootstrap-datepicker怎么用

這篇文章主要講解了“bootstrap-datepicker怎么用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“bootstrap-datepicker怎么用”吧！

在bootstrap中，“bootstrap-datepicker”用于設置日歷、時間樣式，是一款時間選擇插件，語法為“元素對象.datepicker({屬性:屬性值,...})”；可以通過不同的屬性來設置時間顯示樣式。

本教程操作環境：Windows10系統、bootstrap3.3.7版、DELL G3電腦

bootstrap-datepicker的用法是什么

bootstrap-datepicker是一款時間選擇插件，但默認顯示的文字格式是英文，所以得先引入中文包

<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src='bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js'></script>
<script>

簡單的介紹一下bootstrap-datepicker一些基本屬性

$(function(){
         $('#datetimepicker').datetimepicker({
           language:"zh-CN",    //語言選擇中文
           format:"yyyy-mm",    //格式化日期
           timepicker:true,     //關閉時間選項
           yearEnd:2050,        //設置最大年份
           todayButton:false    //關閉選擇今天按鈕
           autoclose: 1,        //選擇完日期后，彈出框自動關閉
           startView:3,         //打開彈出框時，顯示到什么格式,3代表月
           minView: 3,          //能選擇到的最小日期格式
    });

舉個2個簡單的案例

只顯示年月

$('#datetimepicker').datetimepicker({
         language:"zh-CN",
         format:'yyyy-mm',
         autoclose: 1,
         startView:3, 
         minView: 3,
       });

顯示年月日

            language:  'zh-CN',  
            minView:2,
            autoclose: 1,
            startView:3, 
            format:'yyyy-mm-dd',

注意點：可能會發生選擇日歷的樣式問題

左右兩邊的按鈕圖片沒有

這個應該是bootstrap的版本問題，在2的版本上會顯示，但在3的版本上就顯示不出來了，這時候給input添加form-control類名就能解決

選項舉例：

weekStart

Integer. 默認值：0

一周從哪一天開始。0（星期日）到6（星期六）

startDate

Date. 默認值：開始時間

endDate

Date. 默認值：結束時間

autoclose

Boolean. 默認值：false

當選擇一個日期之后是否立即關閉此日期時間選擇器。

startView

Number, String. 默認值：2, 'month'

日期時間選擇器打開之后首先顯示的視圖。 可接受的值：

• 0 or 'hour' 為小時視圖

• 1 or 'day' 為天視圖

• 2 or 'month' 為月視圖（為默認值）

• 3 or 'year'  為年視圖

• 4 or 'decade' 為十年視圖

todayBtn

Boolean, "linked". 默認值: false

如果此值為true 或 "linked"，則在日期時間選擇器組件的底部顯示一個 "Today" 按鈕用以選擇當前日期。如果是true的話，"Today" 按鈕僅僅將視圖轉到當天的日期，如果是"linked"，當天日期將會被選中。

todayHighlight

Boolean. 默認值: false

如果為true, 高亮當前日期。

感謝各位的閱讀，以上就是“bootstrap-datepicker怎么用”的內容了，經過本文的學習后，相信大家對bootstrap-datepicker怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！