Bootstrap日期选择器未将选定日期显示为高亮。

Question

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

以下是我的代码：

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

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

js fiddle链接如下： Js fiddle 链接

- Amit Kumar

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" />

- VincenzoC

Answer 2

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

- Venkatachalam

Answer 3

这个更新的 fiddle（在线代码编辑器）有你要的答案。

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。

- Pankaj Kumar