More than 5 years have passed since last update.

bootstrap-datepickerのOption一覧

Last updated at 2019-01-08Posted at 2019-01-08

はじめに

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: '&laquo;',
            rightArrow: '&raquo;'
        },
        // 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,
    });
});

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up