bootstrap-datepickerのOption一覧

# はじめに

[bootstrap-datepicker](https://github.com/uxsolutions/bootstrap-datepicker)に存在するピッカーのオプションのまとめです。

公式ドキュメントは[こちら](https://bootstrap-datepicker.readthedocs.io/en/latest/options.html)

# 前提

以下の形で定義する

```javascript:sample.js
$(function(){
    $('.datepicker').datepicker({
        autoclose: true,
        assumeNearbyYear: true,
    });
});
```

# 各Option

## autoclose

日付選択時に自動でピッカーを閉じる

```javascript
$(function(){
    $('.datepicker').datepicker({
        autoclose: false,   // デフォルト
        // autoclose: true,
    });
});
```



## assumeNearbyYear

年が2桁の場合に自動で世紀を付ける(`19/1/2`→`2019/01/02`)

```javascript
$(function(){
    $('.datepicker').datepicker({
        assumeNearbyYear: false,    // デフォルト
        // assumeNearbyYear: true,  // 10年後を前世紀/今世紀の閾値とする
                                    // (2019年の場合:29/1/1→2029/01/01 30/1/1→1930/01/01 )
        // assumeNearbyYear: 20,    // 年単位で↑の閾値を設定
    });
});
```



## beforeShowDay

日付表示カスタマイズ

```javascript
// デフォルト：undefined

// 例：3の倍数の日は選択不可にする
$(function(){
    $('.datepicker').datepicker({
        beforeShowDay: function(date) {
            var param;
            if (date.getDate() % 3 == 0){
                param = {
                    enabled: false,         // 選択可能か
                    classes: 'disable',     // 設定するCSSのクラス名
                    tooltip: '選択不可',    // 日付フォーカス時のツールチップ
                    content: '×'           // 日付の代わりに表示する文字列
                };
            }
            return param;
        },
    });
});
```



## beforeShowMonth

月表示カスタマイズ

```javascript
// デフォルト：undefined

// 例：3の倍数の月は選択不可にする
$(function(){
    $('.datepicker').datepicker({
        beforeShowMonth: function(date) {
            var param;
            if ((date.getMonth() + 1) % 3 == 0){
                param = {
                    enabled: false,         // 選択可能か
                    classes: 'disable',     // 設定するCSSのクラス名
                    tooltip: '選択不可'     // 月フォーカス時のツールチップ
                };
            }
            return param;
        },
    });
});
```



## beforeShowYear

年表示カスタマイズ

```javascript
// デフォルト：undefined

// 例：3の倍数の年は選択不可にする
$(function(){
    $('.datepicker').datepicker({
        beforeShowYear: function(date) {
            var param;
            if (date.getFullYear() % 3 == 0){
                param = {
                    enabled: false,         // 選択可能か
                    classes: 'disable',     // 設定するCSSのクラス名
                    tooltip: '選択不可'     // 年フォーカス時のツールチップ
                };
            }
            return param;
        },
    });
});
```



## beforeShowDecade

10年表示カスタマイズ

```javascript
// デフォルト：undefined

// 例
$(function(){
    $('.datepicker').datepicker({
        beforeShowDecade: function(date) {
            // 同上
        },
    });
});
```



## beforeShowCentury

世紀表示カスタマイズ

```javascript
// デフォルト：undefined

// 例
$(function(){
    $('.datepicker').datepicker({
        beforeShowCentury: function(date) {
            // 同上
        },
    });
});
```



## calendarWeeks

週番号表示

```javascript
$(function(){
    $('.datepicker').datepicker({
        calendarWeeks: false,   // デフォルト
        // calendarWeeks: true,
    });
});
```



## clearBtn

入力クリアボタン表示

```javascript
$(function(){
    $('.datepicker').datepicker({
        clearBtn: false,    // デフォルト
        // clearBtn: true,
    });
});
```



## container

ピッカーを表示する要素

```javascript
$(function(){
    $('.datepicker').datepicker({
        container: 'body',  // デフォルト
        // container: '#picker-container',
    });
});
```



## datesDisabled

選択不可にする日付配列

```javascript
$(function(){
    $('.datepicker').datepicker({
        datesDisabled: [],  // デフォルト
        // datesDisabled: ['2019/01/01', '2019/01/02']
    });
});
```



## daysOfWeekDisabled


選択不可にする曜日配列(`0`:日曜～`6`:土曜)

```javascript
$(function(){
    $('.datepicker').datepicker({
        daysOfWeekDisabled: [],  // デフォルト
        // daysOfWeekDisabled: [0, 6]
    });
});
```



## daysOfWeekHighlighted

ハイライトする曜日配列(`0`:日曜～`6`:土曜)

```javascript
$(function(){
    $('.datepicker').datepicker({
        daysOfWeekHighlighted: [],  // デフォルト
        // daysOfWeekHighlighted: [0, 6]
    });
});
```



## defaultViewDate

カレンダーを最初に開いたときに表示する日付

```javascript
$(function(){
    $('.datepicker').datepicker({
        defaultViewDate: Date(),  // デフォルト
        // defaultViewDate: '2000/05/05',
        // defaultViewDate: {
        //     year: 2005,
        //     month: 3,
        //     date: 15
        // },
    });
});
```



## disableTouchKeyboard

モバイル端末のキーボード無効化

```javascript
$(function(){
    $('.datepicker').datepicker({
        disableTouchKeyboard: false,    // デフォルト
        // disableTouchKeyboard: true,
    });
});
```



## enableOnReadonly

readonly属性が付いている場合はピッカーを表示しない

```javascript
$(function(){
    $('.datepicker').datepicker({
        enableOnReadonly: true,    // デフォルト
        // enableOnReadonly: false,
    });
});
```



## endDate

選択可能な最新日付

```javascript
$(function(){
    $('.datepicker').datepicker({
        endDate: 'End of time',    // デフォルト(275760年)
        // endDate: '2010/01/01',
    });
});
```



## forceParse

ピッカーが閉じた時に強制的に有効な日付に設定する

```javascript
$(function(){
    $('.datepicker').datepicker({
        forceParse: true,    // デフォルト
        // forceParse: false,
    });
});
```



## format

日付フォーマット

日→`d`:ゼロサプレス / `dd`:ゼロパディング
月→`m`:ゼロサプレス / `mm`:ゼロパディング
年→`yy`:2桁 / `yyyy`:4桁
曜日文字列→`D`:省略形 / `DD`:通常形
月文字列→`M`:省略形 / `MM`:通常形

```javascript
$(function(){
    $('.datepicker').datepicker({
        format: 'mm/dd/yyyy',    // デフォルト
        // format: 'yyyy/mm/dd',

        // format: {
        //     // 表示用フォーマットに整形
        //     toDisplay: function (date, format, language) {
        //         var d = new Date(date);
        //         return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
        //     },
        //     // value用フォーマットに整形
        //     toValue: function (date, format, language) {
        //         var d = new Date(date.replace('年', '/').replace('月', '/').replace('日', ''));
        //         return d;
        //     }
        // }
    });
});
```



## immediateUpdates

日のみではなく年または月の選択時にも入力値を更新する

```javascript
$(function(){
    $('.datepicker').datepicker({
        immediateUpdates: false,    // デフォルト
        // immediateUpdates: true,
    });
});
```



## inputs

範囲選択時のinputのリスト

```javascript
$(function(){
    $('.datepicker').datepicker({
        inputs: None,    // デフォルト
        // inputs: [$('#from'), $('#to')]
    });
});
```



## keepEmptyValues

範囲選択時に他の空の値を変更しない

```javascript
$(function(){
    $('.datepicker').datepicker({
        keepEmptyValues: false,    // デフォルト(from設定時、to側が空ならfromの日付が設定される)
        // keepEmptyValues: true,
    });
});
```



## keyboardNavigation

方向キーでの日付選択を許可する

```javascript
$(function(){
    $('.datepicker').datepicker({
        keyboardNavigation: true,    // デフォルト
        // keyboardNavigation: false,
    });
});
```



## language

カレンダーの言語設定

```javascript
$(function(){
    $('.datepicker').datepicker({
        language: 'en',    // デフォルト
        // language: 'ja',
    });
});
```



## maxViewMode

表示モードの上限

日→ `0`/`'days'`/`'month'`
月→ `1`/`'months'`/`'year'`
年→ `2`/`'years'`/`'decade'`
10年→ `3`/`'decades'`/`'century'`
世紀→ `4`/`'centuries'`/`'millenium'`

```javascript
$(function(){
    $('.datepicker').datepicker({
        maxViewMode: 4,    // デフォルト
        // maxViewMode: 'years',
    });
});
```



## minViewMode

表示モードの下限
設定値は同上

```javascript
$(function(){
    $('.datepicker').datepicker({
        minViewMode: 0,    // デフォルト
        // minViewMode: 'months',
    });
});
```



## multidate

複数日付選択許可

```javascript
$(function(){
    $('.datepicker').datepicker({
        multidate: false,   // デフォルト
        // multidate: true, // 制限なし
        // multidate: 2,    // 2つまで選択可能
    });
});
```



## multidateSeparator

複数日付選択時のセパレータ

```javascript
$(function(){
    $('.datepicker').datepicker({
        multidateSeparator: ',',    // デフォルト
        // multidateSeparator: ';',
    });
});
```



## orientation

ピッカー表示位置
`auto`/`top`/`bottom`/`right`/`left` スペース区切りで2つまで

```javascript
$(function(){
    $('.datepicker').datepicker({
        orientation: 'auto',    // デフォルト
        // orientation: 'bottom',
        // orientation: 'top left',
    });
});
```



## showOnFocus

紐づけられている入力フィールドがフォーカスされた時にピッカーを表示する

```javascript
$(function(){
    $('.datepicker').datepicker({
        showOnFocus: true,   // デフォルト
        // showOnFocus: false,
    });
});
```



## startDate

選択可能な最古日付

```javascript
$(function(){
    $('.datepicker').datepicker({
        startDate: 'Beginning of time',   // デフォルト
        // startDate: Date(),
    });
});
```



## startView

ピッカーを開いたときに表示されるビュー
設定値はmaxViewModeを参照

```javascript
$(function(){
    $('.datepicker').datepicker({
        startView: 0,    // デフォルト
        // startView: 'years',
    });
});
```



## templates

ピッカーの一部に使用されるテンプレート

```javascript
$(function(){
    $('.datepicker').datepicker({
        // デフォルト
        templates: {
            leftArrow: '&laquo;',
            rightArrow: '&raquo;'
        },
        // templates: {
        //     leftArrow: '<i class='fa fa-long-arrow-left'></i>',
        //     rightArrow: '<i class='fa fa-long-arrow-right'></i>'
        // },
    });
});
```



## showWeekDays

曜日を表示する

```javascript
$(function(){
    $('.datepicker').datepicker({
        showWeekDays: true,   // デフォルト
        // showWeekDays: false,
    });
});
```



## title

ピッカーのタイトル表示

```javascript
$(function(){
    $('.datepicker').datepicker({
        title: '',   // デフォルト
        // title: '生年月日',
    });
});
```



## todayBtn

ピッカーに'今日'ボタンを表示する

```javascript
$(function(){
    $('.datepicker').datepicker({
        todayBtn: false,        // デフォルト
        // todayBtn: true,      // 現在日付に移動する
        // todayBtn: 'linked',  // 現在日付に移動して選択する
    });
});
```



## todayHighlight

現在日付をハイライトする

```javascript
$(function(){
    $('.datepicker').datepicker({
        todayHighlight: false,  // デフォルト
        // todayHighlight: true,
    });
});
```



## toggleActive

選択されている日付を再度選択すると選択解除する

```javascript
$(function(){
    $('.datepicker').datepicker({
        toggleActive: false,    // デフォルト
        // toggleActive: true,  // multidateの場合は常にtrue
    });
});
```



## updateViewDate

データ更新時にピッカーの表示を更新する
1月表示時に2/1を選択すると2月のカレンダーに切り替えるなど

```javascript
$(function(){
    $('.datepicker').datepicker({
        updateViewDate: true,  // デフォルト
        // updateViewDate: false,
    });
});
```



## weekStart

週の始まりを設定(`0`:日曜～`6`:土曜)

```javascript
$(function(){
    $('.datepicker').datepicker({
        weekStart: 0,  // デフォルト
        // weekStart: 1,
    });
});
```



## zIndexOffset

CSSのz-indexのオフセット 
ピッカーのz-indexはinput(とその先祖DOM)のz-indexの最大値にこの値を加算したものになる

```javascript
$(function(){
    $('.datepicker').datepicker({
        zIndexOffset: 10,  // デフォルト
        // zIndexOffset: 0,
    });
});
```