Bootstrap datepicker -在特定月份的指定日期添加工具提示

Question

工具提示工作正常，问题是我无法设置工具提示只显示特定月份的日期。

如果我将工具提示设置为当前月份的第5天，但工具提示添加在每月的第5天

$('.date-header').datepicker({
          autoclose: true,
          beforeShowDay: function(date) {
            var hilightedDays = [5,6];
            if (~hilightedDays.indexOf(date.getDate()) && ( hilightedDays) ) {
                return {classes: 'highlight', tooltip: 'Example Tooltip data' }
            }}
        }).on('show',function(e, date) {
          $('td.highlight').tooltip();
        });

没有输入字段，因为在这里我没有选择任何日期，只是添加信息作为tooltop

<div class="calendar-block ">
    <span class="date-header calendar--btn d-flex text-center align-items-center "><i class="far fa-calendar-alt"></i></span>
  </div> 

jsFiddle

当点击日历按钮时，是否可以添加日期选择器显示切换样式？

Answer 1

如果您只想将日期应用于当前月份，则可以获取该值并检查datepicker中正在查看的月份是否等于当前月份。

如下所示：

$('.date-header').datepicker({
    autoclose: true,
    beforeShowDay: function(date) {
      var hilightedDays = [5, 6];

      // get current month
      var currentMonth = new Date().getMonth();

      // if date.getMonth() === currentMonth, then highlight the date
      if (date.getMonth() === currentMonth && ~hilightedDays.indexOf(date.getDate()) && (hilightedDays)) {
        return {
          classes: 'highlight',
          tooltip: 'Example Tooltip data'
        }
      }
    }
})

同样，您可以使用任何月份的值(例如，如果您只想在9月显示工具提示，只需检查month === 8；月份是从0开始的，因此0是1月，11是12月)。

更新的提琴：https://jsfiddle.net/bt0hysqm/