SOFTELメモ

</> 技術者募集

【Bootstrap】datepicker(日付選択UI)

問題

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

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

こんなのがいい!

bootstrap-datepicker

けど、こうなっちゃう

jquery-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>';
}

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

jquery-ui の JavaScript

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

jquery-ui の CSS

こんなふう↓になる。

bootstrap-datepicker

なお上の完成図では、見た目の調整で以下の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;}

関連するメモ

コメント(3)

ぽん 2014年12月9日 08:46

素晴らしい記事ありがとうございます!

こちらのdatepickerは時刻も選択できるオプションなどはないでしょうか・・・?

bootstrap3で使えるdatepickerのカレンダーが他要素の後ろに隠れる問題を解決 2014年12月9日 15:15

[…] 日付は 【Bootstrap】datepicker(日付選択UI) […]

yoshimura 2014年12月18日 14:56

コメントありがとうございます。
これは、jqueryuiのdatepickerの見た目を変えただけのものになります。
時刻選択はjqueryuiのdatepickerにない機能はないです。
http://jqueryui.com/datepicker/