부트 스트랩 날짜 피커가 선택된 날짜를 강조 표시로 표시하지 않습니다.

Question

시작 날짜와 종료 날짜에 부트 스트랩 datepicker를 구현하려고했습니다. 시작 날짜를 선택할 때 선택한 값을 종료 날짜로 업데이트하지만 종료 날짜를 클릭하면 datepicker가 열리지 만 선택한 날짜는 강조 표시되지 않습니다. 당신은 대신에 jQuery를 val()의 setDate를 사용하여 선택기로 값을 설정해야 Js fiddle Link

Answer 1

:

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

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

및 JS 바이올린 링크는 다음과 같습니다

여기 내 코드입니다.

changeDate 이벤트 receives extra data에 선택한 날짜가 포함됩니다. date 속성을 사용하여 changeDate listener에 새 값을 설정할 수 있습니다. 여기

작업 예제 :

$('#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

이 업데이트 바이올린

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

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

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

당신은 하여 setDate를 사용할 필요가 답이있다 대신 val을 설정하십시오.

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>