DateRangePicker - 첫 번째 입력이 선택된 값으로 시작하는 두 번째 입력의 최소 날짜

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

예 코드 아래 제의 콜백에 제 선택기를 설정하여 당신을 변경한다. 이 코드는 두 번째 선택기에 대한 새로운 최소 날짜를 가져옵니다

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

을 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" />