引导日期选择器不显示选定的日期为高亮

我试图在开始日期和结束日期实现引导日期选择器。当我选择开始日期时，我将选定的值更新到结束日期，但是当我点击结束日期时，datepicker会打开，但它不会突出显示选定的日期。引导日期选择器不显示选定的日期为高亮

这里是我的代码：

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

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

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

来源

2016-11-04 Maverick

你得值设置为使用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" />

来源

2016-11-04 08:46:46 VincenzoC

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

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。

来源

2016-11-04 11:33:35

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

来源

2016-11-04 12:36:40 Venkatachalam

引导日期选择器不显示选定的日期为高亮

回答

相关问题