Javascript 当用户在引导数据采集器中更改月份时，动态更新选项_Javascript_Jquery_Twitter Bootstrap_Bootstrap Datepicker

Javascript 当用户在引导数据采集器中更改月份时，动态更新选项

javascript jquery twitter-bootstrap

Javascript 当用户在引导数据采集器中更改月份时，动态更新选项,javascript,jquery,twitter-bootstrap,bootstrap-datepicker,Javascript,Jquery,Twitter Bootstrap,Bootstrap Datepicker,我正在使用并且已将listner附加到事件如果我使用listner中列出的一个setter（例如，等），则picker视图不会更新（月份不变）。如果我不在列表器中使用任何日期选择器设置器，那么一切都很好这里有一个显示问题的现场示例。在本例中，我试图在用户更改月份时更新高亮显示的日期功能突出显示（月）{ var highlitedDays=[0,1]；如果（第%2个月==0）{ highlitedDays=[3,4]； } 返回highlitedDays； } $（“#日期选择器”）。日

我正在使用并且已将listner附加到事件

如果我使用listner中列出的一个setter（例如，等），则picker视图不会更新（月份不变）。如果我不在列表器中使用任何日期选择器设置器，那么一切都很好

这里有一个显示问题的现场示例。在本例中，我试图在用户更改月份时更新高亮显示的日期

功能突出显示（月）{
var highlitedDays=[0,1]；
如果（第%2个月==0）{
highlitedDays=[3,4]；
}
返回highlitedDays；
}
$（“#日期选择器”）。日期选择器({
daysOfWeekHighlighted:getHighlighted（新日期（）.getMonth（））
}).on（'changeMonth'，函数（e）{
var month=e.date.getMonth（）；
var highlightedDays=getHighlighted（月）；
//我使用setDaysOfWeekHighlighted作为示例
$（“#datepicker”）.datepicker（'setDaysOfWeekHighlighted'，highlightedDays）；
//做点别的
//...
});
$（“#日期选择器2”）。日期选择器({
daysOfWeekHighlighted:getHighlighted（新日期（）.getMonth（））
}).on（'changeMonth'，函数（e）{
log（“我刚刚将月份更改为”+e.date.getMonth（））；
});
问题：无论何时更改日期，方法都会更新到当前日期
解决方案：尝试以下代码
删除当前的更改方法
将准备初始化的文档添加到当前日期，其他为默认值
<!DOCTYPE html>
<html>
<head>

<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" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">
<script>

$( document ).ready(function() {
var startDate = $('#datepicker').datepicker('setStartDate', new Date());
});

$('#datepicker').datepicker().on('change', function(e){
  // I use setStartDate just as example
  var startDate = $('#datepicker').datepicker('setDaysOfWeekHighlighted', ['2016-04-29',           '2016-04-30']);

  // Do something else
  //...
});

$('#datepicker2').datepicker().on('changeMonth', function(e){
  console.log("I've just changed month to " + e.date.getMonth());
});
</script>
</head>
<body>

</body>
</html>


$（文档）.ready（函数（）{
var startDate=$（'#datepicker'）。datepicker（'setStartDate'，new Date（））；
});
$（'#datepicker'）.datepicker（）.on（'change'，函数（e）{
//我使用setStartDate作为示例
var startDate=$（“#日期选择器”）.datepicker（'setDaysOfWeekHighlighted'，['2016-04-29'，'2016-04-30']）；
//做点别的
//...
});
$（'#datepicker2'）.datepicker（）.on（'changeMonth'，函数（e）{
log（“我刚刚将月份更改为”+e.date.getMonth（））；
});

@VincenzoC请确保您使用的是最新版本（1.7.1），这把小提琴演示了它的工作原理
编辑
在changeMonth、changeYear、changeDecade或changeCentury事件中使用任何set*方法（例如setDatesDisabled）将触发更新，这将导致选择器恢复到当前查看日期发生的月份
为了防止出现这种情况，只需将updateViewDate选项设置为false
启动选择器，每次单击该行时，您都会在内存中实例化一个新的日期选择器：var startDate=$（'#datePicker'）。datePicker（'setStartDate'，new Date（））；因此，您不再指向原始日期选择器，因此日期不会在其上更新。使用“this”关键字引用您的侦听器所附加的日期选择器。@Korgrue感谢您的评论，我尝试使用this
但得到了相同的结果。您是否有使用该方法的工作代码段？我使用了$（'.datepicker'）.datepicker（'method'，arg1，arg2），因为它是在中建议的。请尝试将您的机构或它分配给一个变量，以便您可以直接引用它。@Korgrue再次感谢您的评论。我试过你的建议，但没用。我已编辑了我的问题，显示我已尝试确保我已按照您的建议进行了操作。请查看我的答案，这可能会解决您的问题。谢谢您的回答，但我的问题不是如何更新开始日期。确实，您是否尝试了我的代码。如果没有，请先尝试并检查。您的代码可能可以工作，但对我的情况没有帮助。我必须在changemount
listner中使用日期选择器设置器（setStartDate
只是一个示例）。您的代码中没有changemount
。好的，快速破解一下。只需将datetimepicker库移动到其他js库的顶部。我看到很少有库像这样卡住了。谢谢你的代码，它可以工作，但它没有涵盖我的用例，我更新了我的问题，以更好地解释我的问题是什么。我的问题是如何在用户每月更改时自动更新选项。太好了！版本1.6.4
中有一个bug，当我发布问题时，1.7.1
没有发布。我认为您必须在这个答案中添加updateViewDate注释，以使其更清晰。谢谢你的解决方案！
function getHighlighted(month){
  var highlitedDays = [0, 1];
  if( month % 2 == 0 ){
    highlitedDays = [3, 4];
  }
  return highlitedDays;
}

$('#datepicker').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
  updateViewDate: false
}).on('changeMonth', function(e){
  var month = e.date.getMonth();
  var highlightedDays = getHighlighted(month);
  // I use setDaysOfWeekHighlighted just as example
  $('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
  // Do something else
  //...
});

$('#datepicker2').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
  updateViewDate: false
}).on('changeMonth', function(e){
  console.log("I've just changed month to " + e.date.getMonth());
});