【Bootstrap】datepicker（日付選択UI）

Tweet

Category JavaScript, jQueryPlugin / Tagged jQuery 2013/08/30

問題

Bootstrapを使っているのですが、日付選択UIはやっぱりjqueryuiのdatepickerを使うしかないでしょうか……

jqueriy.ui.datepicker はいいと思うんだけど、読み込まないといけないファイルが増えたり、見た目の統一感が問題だったり……

こんなのがいい！

けど、こうなっちゃう

答え

jquery.ui.datepicker.jsをちょっといじくると、BootstrapのCSSを適用できて、Bootstrapっぽいdatepickerができる。

jquery.ui.datepickerのJavaScriptは完成度が高いので、そのまま使うとして、見た目はjqueryuiのCSSに頼らないようにする。

jquery.ui.datepicker.jsではカレンダー部分のHTMLを作っている_generateHTMLというメソッドや、作ったHTMLを適用・調整している_updateDatepickerというメソッドがある。このあたりをちょっと変えさせてもらう。

Bootstrap3環境で_generateHTMLを変更した例

//デフォルトの動作を少し変える
//前の月へ、次の月へのボタンを <, > に
//表示のとき一番外側にBootstrapのpanelを適用
$.datepicker.setDefaults({
	"prevText" : '&#x3c;',
	"nextText" : '&#x3e;',
	"beforeShow": function(i, o){
		$(o.dpDiv).addClass('panel panel-default');
	}
});
//オリジナルの_generateHTMLをコピーしておいて
$.datepicker.__generateHTML = $.datepicker._generateHTML;

//独自の処理を加えた_generateHTMLで上書きする
//_generateHTMLはHTMLの文字列を作っているので、文字列の置換でカレンダーのHTMLを書き換え可能
$.datepicker._generateHTML = function(inst){
	return '<div class="panel-body">'
		+ $.datepicker.__generateHTML(inst)
			//幅を200pxぐらいにしたい
			.replace('<table', '<table style="width:200px;"')
			//前の月へのボタン
			.replace('ui-datepicker-prev', 'pull-left btn btn-default btn-sm')
			//次の月への簿他
			.replace('ui-datepicker-next', 'pull-right btn btn-default btn-sm')
			//上部の年月の表示部分を中央に
			.replace('ui-datepicker-title', 'text-center')
			//アクティブな日を.btn-primaryに
			.replace('ui-state-default ui-state-active', 'btn btn-primary btn-block btn-xs')
			//当月でない日を.btn-infoで違う色に
			.replace(/ui-state-default ui-priority-secondary/g, 'btn btn-info btn-block btn-xs')
			//当月のその他の日を.btn-linkに
			.replace(/ui-state-default/g, 'btn btn-link btn-block btn-xs')
		+ '</div>';
}

これ↓は使わせてもらうけど、

これ↓からは開放されて、

こんなふう↓になる。

なお上の完成図では、見た目の調整で以下のCSSを適用した。

/* カレンダーに影をつけて目立たせる */
.ui-datepicker {box-shadow:3px 3px 5px rgba(0,0,0,0.5);}
/* 上の部分を太字にする */
.ui-datepicker-header {font-weight:bold;}
/* キーボードでの日付選択時などの強調表示 */
.ui-state-hover {background:#eee;}

DEMO https://www.softel.co.jp/blogs/tech/archives/demo/datepicker-for-bootstrap

残課題

年月をプルダウンにしたり、複数月表示をしたり、オプションの指定によっては上記の対応では不十分な場合が考えられる。

使い方に応じて加工されたし。

追記

オプションを指定すると、非表示の予定のところが表示されることがあるようなので、場合によっては以下のCSSも指定しておくとよい。

.ui-datepicker {display:none;}