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

利用方法

開始日と終了日のinputフォームにidをそれぞれ設定します。（今回の例ではbeginとendです）

data-target

前回と同じでカレンダーを表示するボタンに設定します。
ボタンをクリックした時に呼び出すdatepickerのエレメントを設定します。
今回の例ではinput#beginとinput#endのエレメントにdatepickerを設定するので、#beginと#endとします。

data-end

開始日のinputフォームに設定します。
開始日を設定したときに、終了日の選択範囲を制御するため、終了日のinputフォームのidを設定します。
今回の例では#endを設定しています。

data-begin

data-endの逆に、終了日のinputフォームに開始日のinputフォームのidを設定します。
今回の例では#beginを設定しています。

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