• 溫馨提示×

    bootstrap-datepicker怎么用

    發布時間:2022-05-10 14:29:50 來源:億速云 閱讀:79 作者:iii 欄目:web開發

    這篇文章主要講解了“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,
           });

    bootstrap-datepicker怎么用

    顯示年月日

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

    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-datepicker怎么用”的內容了,經過本文的學習后,相信大家對bootstrap-datepicker怎么用這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

    推薦內容:怎么用redis

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    大白屁股揉起来很爽,韩国免费一级成人毛片,国产亚洲精品a在线无码2021