Question

我有一个设置，我使用Jquery UI日历和Qtip来显示与每月的每一天相关联的文本。

我像这样启动UI组件：

$('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 2
    });

在此之后我发起了qtips：

$('#datepicker').find("td").each(function(){
        $(this).qtip({    
          content:  {   text: tips[$(this).attr('title')]  },
          show: {   solo: true  },    
          hide: 'unfocus'
        });
    })

我保留了需要在数组中显示的信息，这些信息称为“提示”，我从数据库填充。问题是每当我更改月份或点击日期时，qtip将不再显示。

我尝试了这种解决方法，但它无法正常工作：

$('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 2,
        onChangeMonthYear: function(year, month, inst){
             $('#datepicker').find("td").each(function(){
                $(this).qtip({    
                  content:  {   text: tips[$(this).attr('title')]  },
                  show: {   solo: true  },    
                  hide: 'unfocus'
                });
            })
        }
    });

有关如何保存qtips甚至用户点击日元素并更改月份的任何想法？

更新＃1

这是一个复制问题的小提琴http://jsfiddle.net/ZKtAZ/3/（更新小提琴）

更新＃2

正如EmirCalabuch所建议的那样尝试“开启”，但仍然按月更改它无法正常工作http://jsfiddle.net/ZKtAZ/9/。

我可能会说一些愚蠢的事情，但是当日历更改月份时，它实际上会重置整个日期选择器，这可能是它无法正常工作的原因。

更新＃3

我找到了一个解决方案，你可以在这里找到http://jsfiddle.net/ZKtAZ/11/。

实际上我必须将click事件绑定到datepicker，以便它会在月份更改时设置适当的操作。

在启动选择器时，使用这段代码解决了点击日期的问题：

onSelect: function (date, inst) {
        inst.inline = false;
    }

使用此答案https://stackoverflow.com/a/2312825/1168944

找到了解决方案

感谢大家的时间和贡献。

Answer 1

jQuery UI datepicker具有（至少最新版本）内部工具提示支持，因此您无需添加qtip。要将工具提示文本应用于特定日期，请在beforeShowDay函数上返回一个三元素数组（当前返回两个）。第三个元素是您希望在该日期悬停时显示的工具提示文本（如果有的话）。

我在这里发布了一个小提琴，显示了它的外观：http://jsfiddle.net/CFMru/

关于您的问题，在实际创建datepicker表之前调用onChangeMonthYear()方法，因此您无法在其上设置qtip。如果您仍想使用qtip作为工具提示，我认为最好的方法是使用live()或on()拦截悬停事件，检查是否需要在当前日期显示工具提示然后静态显示工具提示。使用on()或live()保证即使在尚不存在的DOM元素上也会调用您的代码：

$('#datepicker tbody td').on('mouseenter', function() {
    // Reconstruct the hovered date
    var closest_datepicker = $(this).closest('div.ui-datepicker-group');
    var month = closest_datepicker.find('span.ui-datepicker-month').text();
    var year = closest_datepicker.find('span.ui-datepicker-year').text();
    var day = $(this).text();

    // Look for the date in the array

    // Show the tooltip
    $(this).qtip({show: {ready: true}, hide: {fixed : true}, content: 'Your content' });
}

// Attach a mouseleave event as well to hide the tooltip
$('#datepicker tbody td').on('mouseleave', function() {
    // Destroy the tooltip, it will be recreated when hovered again
    $(this).qtip("destroy");
}

jquery ui calendar在更改时重置元素属性

1 个答案: