[精讚] [會員登入]
5601

[Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用

Bootstrap日期選日期選擇器的使用

此文完整連結 http://n.sfs.tw/10241

複製連結 [Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2016-11-16 10:53:52 最後編修
2016-11-16 10:45:05 By 瘦河馬
 

這近在第一次使用 bootstrap的datepicker,撞了不少牆,花了我比預期多了三倍有餘的時間,主要原因是因為1文件的不完整(或是我閱讀的不仔細)、2原程式有bug(我載到有bug的版本),後來為了解決bug[2],這真的是bug,去爬文才發現這近有更新(2016-9),直到下載最新版本才解決問題。在解決問題中才發現原來已經有台灣的朋友分享了一篇[3],只可惜我沒先看到他的文章。

一、下載

https://github.com/eternicode/bootstrap-datepicker

二、js

<script src="/path/to//jquery.min.js"></script>

<script src="/path/to/bootstrap.js"></script>

<script src="/path/to/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<script src="/path/to/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-TW.js"></script>

三、CSS

<link rel="stylesheet" href="/path/to/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css" />

四、options 設置,詳細可見[1]

$('[type="date"]').datepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    startDate: "today",
    clearBtn: true,
    calendarWeeks: true,
    todayHighlight: true,
    language: 'zh-TW'
});

五、呈現結果

六、修正選單被擋的問題

選單有時會被網頁其他物件擋住,造成看得到選不到的情況,這時只要加上zindex即可,修改你的css檔,找到

.datepicker{border-radius:4px;direction:ltr}

修改為

.datepicker{border-radius:4px;direction:ltr;zindex:9999}

參考資料

[1] options  http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
[2] https://github.com/eternicode/bootstrap-datepicker/issues/500
[3] http://rainicenote.blogspot.tw/2015/08/bootstrap-datetimepicker.html


原文自精讚 2016-09-06 22:42:39

你可能感興趣的文章

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小 CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .

[CKeditor4] 修改特殊字元 CKeditor4 中設定自己想用的特殊字元

[jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法,也有人稱他是假的ajax,作法就是..

[Ckeditor4] 讀、寫與插入內容到欄位 Ckeditor4 提供非常多方法,可以插入、讀取和寫入到TEXTAREA中

[CKeditor4] 修改調色盤 修改ckeditor預設的調色盤

Javascript/Jquery 建立、讀取、刪除cookie值 Javascript/Jquery 建立、讀取、刪除cookie值

[Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用 Bootstrap日期選日期選擇器的使用

[Javascript] 偵錯方式 (火狐中的javascript偵錯) javascript 並不是很容易偵錯(debug)的語言,但那是以前,現在有很多瀏覽器支持很多的工具,此文以火狐為例談談偵錯...

正則表達式:Email名稱防止連續輸入點(.)及下底線(_) Email的名稱中要允許特殊符號,但又不允許連續出現的正則表達式

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

HP SAS硬碟leds燈號說明 HP SAS硬碟leds燈號(hp g7/g6系統適用)說明

沒有非誰做不可的事,也沒有不可被取代的人 沒有非誰做不可的事,也沒有不可被取代的人

談借錢 人借錢時手心向上頭向下,人還錢時手心向下頭向上

問問題 問問題其實內涵很深,我悟了很久才懂。 有人問題的目的並不一定是想要得到答案,有時只是純粹想問問題..

[大型機台] 熱血高校躲避球 多少少年時光歲月耗在這個遊戲上,二十幾年前的那個時光,唯一想做的事就是把吃飯錢省下來拿去打一場五塊錢的電動,就算是沒錢也