ブートストラップ日付ピッカーが選択された日付をハイライト表示していない

Question

開始日と終了日にブートストラップdatepickerを実装しようとしていました。 開始日を選択すると、選択した値が終了日に更新されますが、終了日をクリックすると、datepickerが開きますが、選択した日付は強調表示されません。ここで

は私のコードです：

$('#start_date, #end_date').datepicker(); 

$('#start_date').on('changeDate', function (selected) { 
    $('#end_date').val($(this).val()); 
    $(this).datepicker('hide'); 
}); 

とJSフィドルのリンクは次のとおりです。 Js fiddle Link

Answer 1

あなたはjQueryのval()setDateを使用して代わりのピッカーに値を設定する必要があります。

changeDateイベントreceives extra dataには、選択した日付が含まれています。 date属性を使用して、changeDateのリスナーに新しい値を設定することができます。

ここで作業例：

$('#start_date, #end_date').datepicker(); 
 

 
$('#start_date').on('changeDate', function (selected) { 
 
    $('#end_date').datepicker('setDate', selected.date); 
 
    $(this).datepicker('hide'); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 

 
<input type="text" id="start_date" /> 
 
<input type="text" id="end_date" />

Answer 2

この更新フィドルは、あなたの答えあなたがのsetdateを使用する必要が

https://jsfiddle.net/qcw0dcaL/10/

$('#start_date').datepicker(); 

$('#start_date').on('changeDate', function (selected) { 
     $('#end_date').datepicker('setDate', selected.date); 
      $(this).datepicker('hide'); 
     }); 

を持っていますを設定してください。

Answer 3

$('#datepicker').datepicker({ 
 
    autoclose: true, 
 
    todayHighlight: true 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 
<div> 
 
    <input type="text" type="text" class="form-control" id="datepicker" /> 
 
</div>