2つのDatepickerを連動させる

BootstrapでjQuery UIのDatepickerを利用するをさらに進化させて、2つのDatepickerをそれぞれ連動させ、開始日と終了日を選択するパーツを作成します。
開始日は終了日以前のみ選択でき、終了日は開始日以降のみ選択できます。

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

コーディング

HTML

<form class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <input type="text" id="begin" class="form-control datepicker" data-end="#end" value="2014/08/10" size="12">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" data-toggle="datepicker" data-target="#begin">
                <span class="glyphicon glyphicon-calendar"></span></button>
            </span>
        </div>
    </div>
    ～
    <div class="form-group">
        <div class="input-group">
            <input type="text" id="end" class="form-control datepicker" data-begin="#begin" value="2014/08/20" size="12">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" data-toggle="datepicker" data-target="#end">
                <span class="glyphicon glyphicon-calendar"></span></button>
            </span>
        </div>
    </div>
</form>

Javascript

$(function(){
    $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
    $(".datepicker").datepicker({
        beforeShow: function (input, inst) {
            var $this = $(input);
            var begin = $this.data('begin') || '';
            if (begin) {
                $this.datepicker("option", "minDate", $(begin).val());
            }
            var end = $this.data('end') || '';
            if (end) {
                $this.datepicker("option", "maxDate", $(end).val());
            }
        },
        onSelect: function (dateText, inst) {
            var $this = $(inst.input);
            var begin = $this.data('begin') || '';
            if (begin) {
                $(begin).datepicker("option", "maxDate", dateText);
            }
            var end = $this.data('end') || '';
            if (end) {
                $(end).datepicker("option", "minDate", dateText);
            }
        },
    });
 
    $('[data-toggle=datepicker]').each(function () {
        var target = $(this).data('target') || '';
        if (target) {
            $(this).bind("click", function () {
                $(target).datepicker("show");
            });
        }
    });
});