当用户在引导日期选择器中更改月份时动态更新选项答案

【问题标题】：Update option dinamically when user changes month in bootstrap datepicker当用户在引导日期选择器中更改月份时动态更新选项
【发布时间】：2023-04-08 07:05:01
【问题描述】：

我正在使用bootstrap-datepicker，并且我已将一个侦听器附加到changeMonth 事件。

如果我在列表器中使用here 列出的设置器之一（例如setStartDate、setDatesDisabled、setDaysOfWeekHighlighted 等），则选择器视图不会更新（月份不变）。一切正常，如果我不在我的列表器中使用任何日期选择器的设置器。

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

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

我错过了什么？

我在this question 中使用setDatesDisabled 在changeMonth 列表中时遇到了这个问题。

编辑（在 cmets 之后）

我已经尝试在'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
  //...
});

但问题仍然存在。

【问题讨论】：

您每次单击时都会在内存中实例化一个新的 datePicker 作为此行的结果： var startDate = $('#datepicker').datepicker('setStartDate', new Date());因此，您不再指向原始 datePicker，因此日期不会更新。使用“this”关键字来引用您的侦听器所附加的日期选择器。
@Korgrue 感谢您的评论，我尝试使用this，但得到了相同的结果。你有使用这种方法的工作 sn-p 吗？我使用了$('.datepicker').datepicker('method', arg1, arg2);，因为它在docs 中被建议。
尝试将您的实例分配给一个变量，以便您可以直接引用它。
@Korgrue 再次感谢您的评论。我试过你的建议，但没有奏效。我已经编辑了我的问题，显示我试图确保我已经按照你的建议做了。
请查看我对another question 的回复，这可能会解决您的问题。

标签： javascript jquery twitter-bootstrap bootstrap-datepicker

【解决方案1】：

@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、changeDecade 或changeCentury 事件将触发更新，这将导致选择器恢复到当前查看日期所在的月份。

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

【讨论】：

太棒了！ 1.6.4 和 1.7.1 版本中有一个错误，当我发布问题时没有发布。我认为您还必须在此答案中添加 updateViewDate 注释以使其更清晰。感谢您的解决方案！

【解决方案2】：

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

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

删除您当前的更改方法。

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

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

【讨论】：

谢谢你的回答，但我的问题不是如何更新开始日期。
没错，你试过我的代码吗？如果没有，请先尝试检查。
您的代码可能有效，但对我来说没有帮助。我必须在changeMonth listner 中使用日期选择器设置器（setStartDate 只是一个示例）。您的代码中没有changeMonth。
好的，快速破解。只需将您的 datetimepicker 库移到其他 js 库的顶部即可。我见过很少有像这样卡住的库。
感谢您的代码，它有效，但它不涵盖我的用例，我更新了我的问题以更好地解释我的问题。我的问题是当用户更改月份时如何动态更新选项。