DateRangePicker - 第1入力選択値で開始する2番目の入力のminDate

Question

DateRangePickerプラグインを使用して日付を選択しています。

ピッカーは正常に動作していますが、mindateのMultiCityTripTwoは、選択された値がMultiCityTripOneである必要があります。

誰も解決策を提案できますか？

HTML：

<input class="form-control input-lg" id="multiCityTripInputOne" name="MulticityTripOne" /> 

<input class="form-control input-lg" id="multiCityTripInputTwo" name="MulticityTripTwo" /> 

のJs：以下

var nowDate = new Date(); 
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 

$('input[name="MulticityTripOne"]').daterangepicker({ 
    "autoApply": true, 
    "autoUpdateInput": false, 
    "singleDatePicker": true, 
    "minDate": today, 
    "maxDate": maxLimitDate, 
    "opens": "left", 
    "locale": { 
     format: 'DD MMM YYYY' 
    } 
}, function (start, end) { 
    $("#multiCityTripInputOne").val(start.format('DD MMM YYYY')); 
    $('#multiCityTripInputOne').parent().parent().removeClass('has-error'); 
    console.log($("#multiCityTripInputOne").val()); 
}); 

$('input[name="MulticityTripTwo"]').daterangepicker({ 
    "autoApply": true, 
    "autoUpdateInput": false, 
    "singleDatePicker": true, 
    "minDate": today, /* Mindate have to start with MultiCityTripOne val */ 
    "maxDate": maxLimitDate, 
    "opens": "left", 
    "locale": { 
     format: 'DD MMM YYYY' 
    } 
}, function (start, end) { 
    $("#multiCityTripInputTwo").val(start.format('DD MMM YYYY')); 
    $('#multiCityTripInputTwo').parent().parent().removeClass('has-error'); 
}); 

Answer 1

例コードは、最初のコールバックで第ピッカーを設定してイメージを変更します。 startがコールバックである

var aMinDate = new Date(Date.parse(start));

：このコードは、第二ピッカーのための新しい日付の最小値を取得します。返事が遅れて申し訳ありません

var nowDate = new Date(); 
 
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 
 
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 
 
var minDateForSecondPicker; 
 

 
$('input[name="MulticityTripOne"]').daterangepicker({ 
 
    "autoApply": true, 
 
    "autoUpdateInput": false, 
 
    "singleDatePicker": true, 
 
    "minDate": today, 
 
    "maxDate": maxLimitDate, 
 
    "opens": "left", 
 
    "locale": { 
 
    format: 'DD MMM YYYY' 
 
    } 
 
}, function(start, end) { 
 
    $("#multiCityTripInputOne").val(start.format('DD MMM YYYY')); 
 
    $('#multiCityTripInputOne').parent().parent().removeClass('has-error'); 
 
    console.log($("#multiCityTripInputOne").val()); 
 

 
    var aMinDate = new Date(Date.parse(start)); 
 
    
 
    $('input[name="MulticityTripTwo"]').daterangepicker({ 
 
    "autoApply": true, 
 
    "autoUpdateInput": false, 
 
    "singleDatePicker": true, 
 
    "minDate": aMinDate, 
 
    "maxDate": maxLimitDate, 
 
    "opens": "left", 
 
    "locale": { 
 
     format: 'DD MMM YYYY' 
 
    } 
 
    }, function(start, end) { 
 
    $("#multiCityTripInputTwo").val(start.format('DD MMM YYYY')); 
 
    $('#multiCityTripInputTwo').parent().parent().removeClass('has-error'); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Include Required Prerequisites --> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> 
 

 
<!-- Include Date Range Picker --> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> 
 

 
<input class="form-control input-lg" id="multiCityTripInputOne" name="MulticityTripOne" /> 
 

 
<input class="form-control input-lg" id="multiCityTripInputTwo" name="MulticityTripTwo" />