循环当前显示的 DatePicker 的日子

Posted 2023-05-08

【中文标题】循环当前显示的 DatePicker 的日子

【英文标题】：Loop on currently displayed DatePicker's days

【发布时间】：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;
    

);

【参考方案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 选项。