ブートストラップDPの日付比較

Question

date_fromとdate_toを2つのdatepicker関数から比較するにはどうすればいいですか？

var datepicker = $.fn.datepicker.noConflict(); 
    $.fn.bootstrapDP = datepicker; 

    $("#date_from").bootstrapDP({format: 'yyyy-mm-dd', endDate: '+1d'}) 
     .on('changeDate', function (event) { 
      $("#date_from").bootstrapDP('hide') 
      $($("#date_to")[0]).focus() 
     }); 


    $("#date_to").bootstrapDP({format: 'yyyy-mm-dd', endDate: '+1d'}) 
       .on('changeDate', function (event) { 
      $("#date_to").bootstrapDP('hide') 
     }); 

Answer 1

あなたはBootstap日付ピッカーのdate-range constructor使用できます。あなたはより多くの、日付を終え、完成した日付値がautomaticaly修正されることを開始した日付の値を設定した場合

$('.input-daterange').datepicker();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> 
 

 
<div class="input-group input-daterange"> 
 
    <input id="started" type="text" class="form-control" value="10/01/2017"> 
 
    <div class="input-group-addon">to</div> 
 
    <input id="finished" type="text" class="form-control" value="10/02/2017"> 
 
</div>

を。あなたが日付を比較する必要があるのはなぜ

$('.input-daterange').datepicker().on('changeDate', function(e) { 
 
    var started = $('#started').datepicker('getDate'); 
 
    var finished = $('#finished').datepicker('getDate'); 
 
    var date; 
 
    if (started >= finished) { 
 
    if (e.target.id == 'started') { 
 
     date = new Date(started); 
 
     date.setDate(started.getDate() - 1); 
 
     $('#started').datepicker('setDate', date); 
 
    } 
 
    if (e.target.id == 'finished') { 
 
     date = new Date(finished); 
 
     date.setDate(finished.getDate() + 1); 
 
     $('#finished').datepicker('setDate', date); 
 
    } 
 
    } 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> 
 

 
<div class="input-group input-daterange"> 
 
    <input id="started" type="text" class="form-control" value="10/01/2017"> 
 
    <div class="input-group-addon">to</div> 
 
    <input id="finished" type="text" class="form-control" value="10/02/2017"> 
 
</div>