Bootstrap Datepicker not displaying selected date as highlighted

Question

I was trying to implement bootstrap datepicker on start date and end date. When I select start date I update selected value into end date, but when I click on end date datepicker opens up but it does not highlight selected date.

Here is my code:

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

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

and js fiddle link is: Js fiddle Link

Answer 1

You have to set value to the picker using setDate instead of jQuery val().

Note that changeDate event receives extra data including the selected date. You can use date attribute to set new value in your changeDate listner.

Here a working example:

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