循环当前显示的 DatePicker 的日子答案

【问题标题】：Loop on currently displayed DatePicker's days循环当前显示的 DatePicker 的日子
【发布时间】：2018-04-20 19:36:41
【问题描述】：

我在 JQuery 中使用引导日期选择器。

我希望每次显示不同的月份时对当前显示的天数进行一些更改。我设法在默认月份（打开日期选择器时显示的那个月份）执行此操作，但是如果我单击“下一个”或“上一个”按钮，它就不再起作用了。

为了更好地理解，这里是一个重现问题的 JSFiddle（我想要的不是改变背景颜色，但我让它更易于使用）：https://jsfiddle.net/k45xjquk/

我们可以在我的 JSFiddle 上看到，每次显示一个月时都会调用日志，但背景颜色没有改变，知道吗？

这里是 JSFiddle 的主要内容，我们可以在其中看到我如何在当前显示的日期开始循环：

$(document).ready(function(){

    $("#weeklyDatePicker").datetimepicker({
        format: 'MM-DD-YYYY'
    });

    $("#weeklyDatePicker").click(function() {
      $(".next,.prev").click(function() {
        changeDaysBackground();
      });
      changeDaysBackground();
    });

    function changeDaysBackground() {
      console.log("changeBackground");
      var days = $(".datepicker-days td");
      days.each(function(i) {
        $(this).css("background-color", getRandomColor());
      });
    }

    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

});

【问题讨论】：

标签： jquery twitter-bootstrap datepicker eonasdan-datetimepicker

【解决方案1】：

查看文档的Events 部分。您可以使用：

dp.show

小部件显示时触发。
dp.update

在viewDate 更改时（在大多数情况下）触发。例如。下一个和上一个按钮，选择年份。

这里是一个活生生的例子：

$("#weeklyDatePicker").datetimepicker({
    format: 'MM-DD-YYYY',
    locale: 'fr'
}).on('dp.show dp.update', changeDaysBackground);

function changeDaysBackground() {
  console.log("changeBackground");
  var days = $(".datepicker-days td");
  days.each(function(i) {
    $(this).css("background-color", getRandomColor());
  });
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-6 form-group">
      <div class="input-group" id="DateDemo">
        <input type='text' id='weeklyDatePicker' placeholder="Select Week" />
      </div>
    </div>
 </div>

PS。如果您想将语言环境更改为 datetimepicker，请使用 locale 选项。

【讨论】：