bootstrap-datepicker

Bootstrap-datepicker 提供了一個擁有Bootstrap樣式的彈性Datepicker控件

Requirements/使用要求

• Bootstrap 2.0.4+
• jQuery 1.7.1+

這兩個版本是經過測試的，其他版本風險自負。

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/

Bootstrap-datepicker3官方文檔中文翻譯---概述（原版翻譯 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html）