bootstrap-datepicker的用法是什麼-前端問答-PHP中文網

bootstrap-datepicker的用法是什麼

WBOY

發布： 2022-05-05 17:49:34

原創

3239 人瀏覽過

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

bootstrap-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=&#39;bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js&#39;></script>
<script>

登入後複製

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

$(function(){
         $(&#39;#datetimepicker&#39;).datetimepicker({
           language:"zh-CN",    //语言选择中文
           format:"yyyy-mm",    //格式化日期
           timepicker:true,     //关闭时间选项
           yearEnd:2050,        //设置最大年份
           todayButton:false    //关闭选择今天按钮
           autoclose: 1,        //选择完日期后，弹出框自动关闭
           startView:3,         //打开弹出框时，显示到什么格式,3代表月
           minView: 3,          //能选择到的最小日期格式
    });

登入後複製

舉個2個簡單的案例

只顯示年月

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

登入後複製

bootstrap-datepicker的用法是什麼

#顯示年月日

            language:  &#39;zh-CN&#39;,  
            minView:2,
            autoclose: 1,
            startView:3, 
            format:&#39;yyyy-mm-dd&#39;,

登入後複製

bootstrap-datepicker的用法是什麼

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

左右兩邊的按鈕圖片沒有

bootstrap-datepicker的用法是什麼

這個應該是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教學#######

以上是bootstrap-datepicker的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！