当用户在bootstrap datepicker中更改月份时，以dinamically方式更新选项

我正在使用bootstrap-datepicker ，我已经将一个listner附加到changeMonth事件。

如果我在列表器中使用此处列出的setter之一（例如setStartDate ， setDatesDisabled ， setDaysOfWeekHighlighted等），则选择器视图不会更新（月份不变）。 如果我不在列表器中使用任何datepicker的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()); }); 

我错过了什么？

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

---

编辑 （评论后）

我已经尝试在'changeMonth'使用$(this)并将我'changeMonth'分配给变量，如下所示：

 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

@VincenzoC请确保你使用的是最新版本（1.7.1），这个小提琴演示它可以运行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中使用任何set *方法（例如setDatesDisabled ）， changeYear ， changeDecade或changeCentury事件将触发更新，这将导致选择器恢复到当前视图日期发生的月份。

要防止这种情况，您只需在updateViewDate选项设置为false的情况下启动选择器。

Answer 2

问题：每当您更改日期时，您的方法都会更新为当前日期。

解决方案：尝试以下代码。

1. 删除当前的更改方法。

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