bootstrap-datepickerのOption一覧

-
bootstrap-datepickerのOption一覧:


はじめに

bootstrap-datepickerに存在するピッカーのオプションのまとめです。

公式ドキュメントはこちら


前提

以下の形で定義する

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


各Option


autoclose

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

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


assumeNearbyYear

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

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


beforeShowDay

日付表示カスタマイズ

// デフォルト：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

月表示カスタマイズ

// デフォルト：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

年表示カスタマイズ

// デフォルト：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年表示カスタマイズ

// デフォルト：undefined 
 
// 例 
$(function(){ 
    $('.datepicker').datepicker({ 
        beforeShowDecade: function(date) { 
            // 同上 
        }, 
    }); 
});


beforeShowCentury

世紀表示カスタマイズ

// デフォルト：undefined 
 
// 例 
$(function(){ 
    $('.datepicker').datepicker({ 
        beforeShowCentury: function(date) { 
            // 同上 
        }, 
    }); 
});


calendarWeeks

週番号表示

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


clearBtn

入力クリアボタン表示

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


container

ピッカーを表示する要素

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


datesDisabled

選択不可にする日付配列

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


daysOfWeekDisabled

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

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


daysOfWeekHighlighted

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

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


defaultViewDate

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

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


disableTouchKeyboard

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

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


enableOnReadonly

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

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


endDate

選択可能な最新日付

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


forceParse

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

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


format

日付フォーマット

日→d:ゼロサプレス / dd:ゼロパディング

月→m:ゼロサプレス / mm:ゼロパディング

年→yy:2桁 / yyyy:4桁

曜日文字列→D:省略形 / DD:通常形

月文字列→M:省略形 / MM:通常形

$(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

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

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


inputs

範囲選択時のinputのリスト

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


keepEmptyValues

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

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


keyboardNavigation

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

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


language

カレンダーの言語設定

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


maxViewMode

表示モードの上限

日→ 0/'days'/'month'

月→ 1/'months'/'year'

年→ 2/'years'/'decade'

10年→ 3/'decades'/'century'

世紀→ 4/'centuries'/'millenium'

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


minViewMode

表示モードの下限

設定値は同上

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


multidate

複数日付選択許可

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


multidateSeparator

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

$(function(){ 
    $('.datepicker').datepicker({ 
        multidateSeparator: ',',    // デフォルト 
        // multidateSeparator: '-', // 制限なし 
    }); 
});


orientation

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

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


showOnFocus

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

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


startDate

選択可能な最古日付

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


startView

ピッカーを開いたときに表示されるビュー

設定値はmaxViewModeを参照

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


templates

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

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


showWeekDays

曜日を表示する

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


title

ピッカーのタイトル表示

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


todayBtn

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

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


todayHighlight

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

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


toggleActive

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

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


updateViewDate

データ更新時にピッカーの表示を更新する

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

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


weekStart

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

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


zIndexOffset

CSSのz-indexのオフセット

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

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

コメント

コメントを投稿

このブログの人気の投稿

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… ｢iOS 15｣の新機能の一部は｢iPhone XS｣以降でしか利用出来ないものも https://taisy0.com/2021/06/15/141888.html tomac 2021-06-15 13:11:47 IT ITmedia 総合記事一覧 [ITmedia Mobile] ソースネクストの「ポケトーク」に新機能　グループ翻訳とWeb会議への字幕付与に対応 https://www.itmedia.co.jp/mobile/articles/2106/15/news164.html itmediamobile 2021-06-15 22:10:00 AWS AWS Architecture Blog Field Notes: Benchmark...
続きを読む

投稿時間:2021-04-30 23:37:32 RSSフィード2021-04-30 23:00 分まとめ(42件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 IT 気になる、記になる… Microsoft、Android向け｢Microsoft Edge｣のDevビルドをGoogle Play ストアで公開 https://taisy0.com/2021/04/30/139961.html android 2021-04-30 13:46:02 python Pythonタグが付けられた新着投稿 - Qiita Raspberrypi + Pythonで、今日のゴミの日を取得して、LINE通知とアレクサにお知らせしてもらう https://qiita.com/xxxyahho/items/e7b2552f8ff794d7bf07 cronで日回一ヶ月間動かしてみて様子見。 2021-04-30 22:27:31 python Pythonタグが付けられた新着投稿 - ...
続きを読む

投稿時間:2023-02-05 02:09:04 RSSフィード2023-02-05 02:00 分まとめ(9件)

-
カテゴリー等 サイト名等 記事タイトル・トレンドワード等 リンクURL 頻出ワード・要約等/検索ボリューム 登録日 python Pythonタグが付けられた新着投稿 - Qiita pythonの-mオプションの動作を調べる https://qiita.com/Ryku/items/d9cebcb9e0a9e36281c6 pythonmmym 2023-02-05 01:18:33 python Pythonタグが付けられた新着投稿 - Qiita 【Python】pythonでwifi接続をしてみた。【pywifi】 https://qiita.com/shinfx/items/f7250730c0d8dabb5962 pywifi 2023-02-05 01:10:24 js JavaScriptタグが付けられた新着投稿 - Qiita 【Julia】Electron.jlを使ってカウンタ...
続きを読む