首页 > 解决方案 > Bootstrap datepicker - 在特定月份的指定日期添加工具提示

问题描述

工具提示工作正常,问题我无法仅设置特定月份的工具提示日期,

如果我将工具提示设置为当月的第 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();
        });

没有输入,因为在这里我没有选择任何日期,只是将信息添加为工具顶部

<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

是否可以在单击日历按钮时添加日期选择器显示切换样式

标签: javascriptjqueryhtmldatepickerbootstrap-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 月显示工具提示,只需检查月份是否 === 8;月份是从 0 开始的,因此 0 是 1 月,11 是 12 月)。

更新小提琴:https ://jsfiddle.net/bt0hysqm/


推荐阅读