p:calendar 如何在鼠标悬停时显示工具提示

Question

我想在 PrimeFaces 6.2 中将鼠标悬停在 p:calendar 元素中的特定日期时显示工具提示。我认为要走的路是使用全局工具提示并更改日历中 a 元素的标题。我怎样才能访问这些？

我尝试使用 onmouseover - 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:

[...]
function hoverDate() {
  console.log("hoverTest");
}
[...]

我希望当我将鼠标悬停在日历中的日期上时，它会将 "hoverTest" 打印到浏览器的 javascript-console，但它不会执行任何操作。我尝试为 hoverDate() 使用 0、1 和 2 个参数。 documentation（第 54 页）只说 "Client side callback to execute when a pointer button is moved onto input element."，没有说任何参数。

方法colorizeDate在同一个javascript-file中并且工作正常，所以问题不可能是找不到方法hoverDate。

我做错了什么？

Answer 1

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

显然，解决方案是在 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 日期选择器 table 下包含的所有 "td" 元素上设置 live/dynamic 绑定，并在 Java 上打印出类似于以下内容的内容脚本控制台；

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

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

p:calendar 如何在鼠标悬停时显示工具提示

How to show tooltips onmouseover in p:calendar

javascript

calendar

callback

onmouseover

primefaces