Help us understand the problem. What is going on with this article?

bootstrap-datepickerのOption一覧

More than 1 year has passed since last update.

はじめに

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

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

前提

以下の形で定義する

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

各Option

autoclose

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

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

assumeNearbyYear

年が2桁の場合に自動で世紀を付ける(19/1/22019/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,
    });
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away