当用户在 bootstrap 日期选择器中更改月份时动态更新选项

Question

我正在使用 bootstrap-datepicker and I have attached a listner to changeMonth 事件。

如果我在我的监听器中使用 setter 中列出的 here (e.g. setStartDate, setDatesDisabled, setDaysOfWeekHighlighted 等）之一，选择器视图不会更新（月份不变）。一切正常，如果我不在我的监听器中使用任何日期选择器的 setter。

这里是显示问题的实时示例。在此示例中，我尝试在用户更改月份时更新动态突出显示的日期。

function getHighlighted(month){
  var highlitedDays = [0, 1];
  if( month % 2 == 0 ){
    highlitedDays = [3, 4];
  }
  return highlitedDays;
}

$('#datepicker').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).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())
}).on('changeMonth', function(e){
  console.log("I've just changed month to " + e.date.getMonth());
});

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

我错过了什么？

当我回答我在 changeMonth listner 中使用 setDatesDisabled 时遇到了这个问题。

编辑（评论后）

我已经尝试在 'changeMonth' 中使用 $(this) 并将我的日期选择器分配给一个变量，如下所示：

var dt = $('#datepicker').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
})
dt.on('changeMonth', function(e){
  var month = e.date.getMonth();
  var highlightedDays = getHighlighted(month);
  // Neither using dt nor $(this) works
  dt.datepicker('setDaysOfWeekHighlighted', highlightedDays);
  // Do something else
  //...
});

但问题依然存在

Answer 1

问题：只要您更改日期，您的方法就会更新为当前日期。

解决方法：试试下面的代码。

删除当前的更改方法。

添加文档准备初始化到当前日期，其他为默认值。

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

Answer 2

@VincenzoC 请确保您使用的是最新版本 (1.7.1)，此 Fiddle 证明它有效 https://jsfiddle.net/s35za9dr/

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());
});

编辑

在 changeMonth、changeYear[=29= 中使用任何 set* 方法（例如 setDatesDisabled） ], changeDecade 或 changeCentury 事件将触发更新，这将使选择器恢复到当前查看日期所在的月份。

为防止这种情况发生，您只需启动选择器并将 updateViewDate 选项设置为 false。

当用户在 bootstrap 日期选择器中更改月份时动态更新选项

Update option dinamically when user changes month in bootstrap datepicker

javascript

jquery

twitter-bootstrap

bootstrap-datepicker