最近ちょっとしたサイトを作ろうとしたときに、Bootstrapでデザインをしています。
その時に、モーダルとか、アコーディオンなどがそろっているため、大変助かるのですが、1つ困っていたことがありました。それは、日付を選択するパーツがないんです。。。
ということで、jQuery UIのDatepickerを利用して、
Bootstrapになじむフォームを作成します。
記事の目次
サンプル
コーディング
HTMLはこんな感じでマークアップ
<form role="form"> <div class="form-group"> <div class="input-group"> <input type="text" id="datepicker" class="form-control" value=""> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="datepicker" data-target="#datepicker"> <span class="glyphicon glyphicon-calendar"></span></button> </span> </div> </div> </form>
Javascriptはこんな感じ
$(function(){ $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] ); $('[data-toggle=datepicker]').each(function () { var target = $(this).data('target') || ''; if (target) { $(target).datepicker(); $(this).bind("click", function () { $(target).datepicker("show"); }); } }); });
使い方
Bootstrapの記法に合わせてdata-xxx
を使ってみました。
data-toggle="datepicker"
datepickerを呼び出すボタンに設定します。
data-target="#datepicker"
ボタンをクリックした時に呼び出すdatepickerのエレメントを設定します。
今回の例ではinput#datepicker
のエレメントにdatepickerを設定するので、#datepicker
とします。
テーマなど
テーマはお好みで変えてください。
個人的には smoothness がおススメです。
いまスグ使えるサンプルコード
cssとJavascriptはCDNを利用していますので、このhtmlファイルだけ用意したらすぐに動作確認はできますよ。
次回は開始日、終了日の入力フォームが2つあるときに、選択可能範囲を自動で調整するdatepickerの利用方法を紹介します。