datepickerの期間設定をいい感じに実装する方法

f:id:jun9632:20160302160105p:plain

BootStrapのDatepickerを使って期間を指定するときに

Datepicker for Bootstrap

github.com

いい感じに期間を調整するには、こんな感じがいいんじゃないかと思ってコードを書いてみました。

いい感じとは?

ニュアンス的な表現いい感じを具体的に書くと

開始日付を設定したときに、終了日付が未入力だったら終了日付を設定する。(今回は仮に3日後に設定しています。)
終了日付を設定したときに、開始日付が未入力だったら開始日付を設定する。(今回は仮に3日前に設定しています。)
開始日付を変更して開始日付 > 終了日付となった場合に、終了日付を3日後に設定変更する。
終了日付を変更して開始日付 > 終了日付となった場合に、開始日付を3日前に設定変更する。
開始日付を入力すると、それより前の日付をdisableにする方法があるようだがそれはやらない。終了日に関してもやらない。

私の考えるいい感じのdatepickerの期間設定です。

コード

htmlとjsはそれぞれ、以下の様になります。

html

 <input type="text" id="start_date" placeholder="2016/12/31" />
 <input type="text" id="end_date" placeholder="2017/01/03" />

$(function(){
    $('#start_date').datepicker({
        language: "ja",
        autoclose: true
    }).on('changeDate', function(e){
        if ($('#end_date').datepicker('getDate') == null || e.date.valueOf() > $('#end_date').datepicker('getDate').valueOf()) {
            var nextDate = new Date(e.date);
            nextDate.setDate(new Date(e.date).getDate() + 3);
            $('#end_date').datepicker('setDate', nextDate);
        }
    });
    $('#end_date').datepicker({
        language: "ja",
        autoclose: true
    }).on('changeDate', function(e){
        if ($('#start_date').datepicker('getDate') == null || $('#start_date').datepicker('getDate').valueOf() > e.date.valueOf()) {
            var previousDay = new Date(e.date);
            previousDay.setDate(new Date(e.date).getDate() - 3);
            $('#start_date').datepicker('setDate', previousDay);
        }
    });
});