Question

我正在使用带有JQuery的bootstrap datepicker。

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

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

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

以下是JSFiddle的主要内容，我们可以看到如何在当前显示的日期启动循环：

mAuth.getCurrentUser().linkWithCredential(credential)
                .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            Log.d(TAG, "linkWithCredential(FB):success");
                            FirebaseUser currentUser = task.getResult().getUser();
                            login(currentUser);

                        } else {
                            Log.w(TAG, "linkWithCredential:failure", task.getException());
                            Toast.makeText(MainActivity.this, "Firebase Authentication failed.",
                                    Toast.LENGTH_SHORT).show();

                        }

                        // ...
                    }
                });

Answer 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选项。

循环显示当前显示的DatePicker的日期

1 个答案: