Bootstrap Datepicker 未将所选日期显示为突出显示

Question

我试图在开始日期和结束日期上实现引导日期选择器。当我选择开始日期时，我将所选值更新为结束日期，但是当我单击结束日期时，日期选择器会打开，但不会突出显示所选日期。

这是我的代码：

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

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

js fiddle 链接是： Js fiddle Link

Answer 1

您必须使用setDate而不是 jQuery为选择器设置值val()。

请注意，changeDate事件会接收包括所选日期在内的额外数据。您可以使用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" />