BootstrapでjQuery UIのDatepickerを利用する

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

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

ということで、jQuery UIのDatepickerを利用して、
Bootstrapになじむフォームを作成します。

コーディング
いまスグ使えるサンプルコード

コーディング

HTMLはこんな感じでマークアップ

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はこんな感じ

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");
            });
        }
    });
});