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
を設定しています。