Question

我在页面加载时使用AJAX获取了一系列禁用日期。但是，我想显示一个工具提示弹出窗口，显示＆＃34;促销日期＆＃34;当指定的禁用日期被鼠标悬停时。任何想法我该怎么做？

$('#PickDate').datetimepicker({
    useCurrent: false,
    showTodayButton: true,
    minDate: parsedDate,
    defaultDate: startDate,
    format: 'DD MMM YYYY',
    disabledDates: dDatesArray,
    daysOfWeekDisabled: [0, 6]
});

Answer 1

所有已禁用的日期都由具有.disabled类的库标记。

您可以为dp.show和dp.update添加一个列表器，然后您可以使用jQuery（$('td.day.disabled')）选择已禁用的日期，并添加title属性（使用.attr()）以获取原生工具提示。

如果您想使用Bootstrap工具提示，只需拨打.tooltip()即可。由于datetimepicker使用HTML <table>，因此您必须向元素添加data-container="body"。正如docs says：

对.btn-group或.input-group内的元素或与表格相关的元素（<td>，<th>，<tr>，{{使用工具提示时1}}，<thead>，<tbody>），您必须指定选项<tfoot>以避免不必要的副作用（例如元素变宽和/或丢失其圆角时触发工具提示）。

这是一个工作示例：

container: 'body'

$('#PickDate').datetimepicker({
  useCurrent: false,
  showTodayButton: true,
  //minDate: parsedDate,
  //defaultDate: startDate,
  format: 'DD MMM YYYY',
  //disabledDates: dDatesArray,
  daysOfWeekDisabled: [0, 6]
}).on('dp.show dp.update', function(){
  $('td.day.disabled').each(function(index, element){
    var $element = $(element)
    $element.attr("title", "Promo Date");
    
    $element.data("container", "body");
    $element.tooltip()
  });
});

鼠标悬停在Bootstrap 3 DateTimePicker v4上禁用日期时的工具提示弹出窗口

1 个答案: