Question

当我将鼠标悬停在PrimeFaces 6.2中的p:calendar元素中的某些日期上时，我想显示工具提示。我认为方法是使用全局工具提示并更改日历内a元素的标题。如何访问这些？

我尝试使用onmouseover的{{1}}-属性，希望将对元素的访问作为参数。第一步，我想在控制台上打印一些内容：

p:calendar：

calendar.xhtml

[...] <h:outputScript library="js" name="calendar.js" /> <p:calendar id="calendar" value="#{calendarManagedBean.dateToday}" mode="inline" onmouseover="hoverDate" beforeShowDay="colorizeDate" /> [...]：

calendar.js

当我将鼠标悬停在日历中的日期上时，我希望它可以将“ hoverTest”打印到浏览器的javascript控制台上，但它不会执行任何操作。我尝试使用[...] function hoverDate() { console.log("hoverTest"); } [...]的0、1和2参数。 documentation（第54页）仅说“当将指针按钮移到输入元素上时要执行的客户端回调。”，但未提及任何参数。

方法hoverDate()在相同的javascript文件中，并且可以正常工作，因此问题不在于找不到方法colorizeDate。

我在做什么错了？

Answer 1

正如您对问题的评论所暗示的那样，mouseover组件的p:calendar事件绑定到父日期输入文本，而不是日期选择器或日期选择器中的各个日期。

显然，解决方案是在JavaScript中手动进行此绑定。使用PrimeFaces 7.0，以下解决方案应该可以工作，

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Calendar hover test</title>
    </h:head>
    <h:body>
        <h:form>
            <p:calendar />
        </h:form>       
        <script>
            $(document).on("mouseenter", ".ui-datepicker-calendar td", function() {
                console.log(this.dataset.year, this.dataset.month, this.children[0].textContent);
            });
        </script>
    </h:body>
</html>

这将在PrimeFaces日期选择器表下包含的所有“ td”元素上设置实时/动态绑定，并将类似以下内容的内容打印到JavaScript控制台上；

根据您的需求，您还可以进一步使用h:commandScript（如果您使用的是JSF 2.3）或p:remoteCommand将其绑定到支持bean Java回调。然后，当此事件发生时，您还可以访问Java端。

如果您使用的是PrimeFaces的较旧版本，则日期选择器的类名称可能会有所不同（尽管我认为它已经有相当一段时间了）。在这种情况下，您可以使用浏览器的DOM检查器来查找绑定的路径。

如何在p：calendar中显示鼠标悬停时的工具提示

1 个答案: