bootstrap-datepicker
Bootstrap-datepicker 提供了一個擁有Bootstrap樣式的彈性Datepicker控件
Dependencies/依賴
某些樣式需要 bootstrap的dropdown組件 (dropdowns.less), 箭頭需要bootstrap的sprites (sprites.less 和相關圖片) .
通過lessc編譯器運行 build/build_standalone.less文件可以生成一個獨立的.css文件（包含必要的dropdown樣式和備選的基於文字的箭頭樣式） //譯者注：也就是其他可選的font圖標箭頭
$ lessc build/build_standalone.less datepicker.css
Usage/用法
通過JS調用：
$('.datepicker').datepicker();
Data API/ 數據API
因為有bootstrap自己的插件存在，所以Datepicker控件可以做到不需要你自己寫javascript就可以被實例化. 在真正的bootstrap方式下，對於大部分datepicker來說, 在你想要初始化的元素上簡單的設置 data-provide="datepicker" , 他就會懶初始化. 對於行內datepicker來說, 用 data-provide="datepicker-inline";這會使得控件在頁面加載的時候就直接被初始化，而不是懶加載。
<input data-provide="datepicker">
在組件中標記：
<div class="input-group date" data-provide="datepicker"> <input type="text" class="form-control"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div>
你可以使用和其他你想金庸的bootstrap插件一樣的方式來禁用datepicker的data-api。
$(document).off('.datepicker.data-api');
Configuration/配置項
在實例化的時候選項可以通過一個鍵值對的方式直接傳遞給Datepicker方法：
$('.datepicker').datepicker({ format: 'mm/dd/yyyy', startDate: '-3d' });
大部分選項可以使用 data-屬性 的方式直接在目標元素上使用
<input class="datepicker" data-date-format="mm/dd/yyyy">
$('.datepicker').datepicker({ startDate: '-3d' });
所有選項的默認值可以在 $.fn.datepicker.defaults中直接修改值。
$.fn.datepicker.defaults.format = "mm/dd/yyyy"; $('.datepicker').datepicker({ startDate: '-3d' });
Stylesheets/樣式
庫中包含了少量的不同樣式. 以下是每一個文件用於什么地方的概覽:
bootstrap-datepicker.css 對於bootstrap2提供傳統支持, bootstrap-datepicker3.css 支持bootstrap3。而 bootstrap-datepicker.standalone.css 可以脫離對於bootstrap庫的依賴而獨立使用.
No Conflict mode/無沖突模式
$.fn.datepicker.noConflict 提供了避免和其他jQuery datepicker控件沖突的方法:
var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value $.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functional
轉載請注明出處：博客園-tincyho http://www.cnblogs.com/tincyho/