最近ちょっとしたサイトを作ろうとしたときに、Bootstrapでデザインをしています。

その時に、モーダルとか、アコーディオンなどがそろっているため、大変助かるのですが、１つ困っていたことがありました。それは、日付を選択するパーツがないんです。。。

ということで、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の利用方法を紹介します。