Question

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

这是我的代码：

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

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

和js小提琴链接是： Js fiddle Link

Answer 1

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

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

这个更新的小提琴有你的答案

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

＆＃13;

$('#datepicker').datepicker({
    autoclose: true,
    todayHighlight: true
});

＆＃13;

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

＆＃13;

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

3 个答案: