Bootstrap 日期选择器未突出显示所选日期

Question

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

这是我的代码：

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

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

和 js fiddle link 是： Js fiddle Link

Answer 1

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

请注意 changeDate event 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

此更新 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.

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>

Bootstrap 日期选择器未突出显示所选日期

Bootstrap Datepicker not displaying selected date as highlighted

twitter-bootstrap

bootstrap-datepicker