循环当前显示的 DatePicker 的日期

Question

我将 bootstrap 日期选择器与 JQuery 一起使用。

我想在每次显示不同的月份时对当前显示的天数进行一些更改。我设法在默认月份（打开日期选择器时显示的月份）进行操作，但是如果我单击 'next' 或 'prev' 按钮，它就不再起作用了。

为了更好地理解，这里有一个重现问题的 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;
    }

});

Answer 1

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

dp.show

Fired when the widget is shown.
dp.update

Fired (in most cases) when the viewDate changes. E.g. Next and Previous buttons, selecting a year.

这是一个活生生的例子：

$("#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. 如果要将区域设置更改为日期时间选择器，请使用 locale 选项。

循环当前显示的 DatePicker 的日期

Loop on currently displayed DatePicker's days

jquery

twitter-bootstrap

datepicker

eonasdan-datetimepicker