Javascript 如何在p:calendar中显示MouseOver上的工具提示_Javascript_Primefaces_Callback_Calendar_Onmouseover

Javascript 如何在p:calendar中显示MouseOver上的工具提示

javascript primefaces calendar

Javascript 如何在p:calendar中显示MouseOver上的工具提示,javascript,primefaces,callback,calendar,onmouseover,Javascript,Primefaces,Callback,Calendar,Onmouseover,我想在PrimeFaces 6.2中的p:calendar元素中将鼠标悬停在特定日期上时显示工具提示。我认为方法是使用全局工具提示并更改日历中a-元素的标题。我如何访问这些我尝试使用p:calendar的onmouseover-属性，希望能够访问元素作为参数。作为第一步，我想在控制台上打印一些东西： calendar.xhtml： [...] <h:outputScript library="js" name="calendar.js" /> <p:calendar

我想在PrimeFaces 6.2中的

p:calendar

元素中将鼠标悬停在特定日期上时显示工具提示。我认为方法是使用全局工具提示并更改日历中

-元素的标题。我如何访问这些

我尝试使用

p:calendar

的

onmouseover

-属性，希望能够访问元素作为参数。作为第一步，我想在控制台上打印一些东西：

calendar.xhtml

：

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

我希望当我将鼠标悬停在日历中的日期上时，它会将“hoverTest”打印到浏览器的javascript控制台上，但它不会做任何事情。我尝试为

hoverDate（）

使用0、1和2个参数。（第54页）只说“当指针按钮移动到输入元素上时执行客户端回调”，没有说任何关于参数的内容

方法

colorizeDate

位于同一个javascript文件中，工作正常，因此问题不可能是找不到方法

hoverDate

我做错了什么？

正如对您问题的评论已经暗示的那样，

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>

根据您的需要，您还可以进一步使用

h:commandScript

（如果您使用的是JSF 2.3）或

p:remoteCommand

，将其绑定到支持bean Java回调。然后，您还可以在该事件发生时访问Java端

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

Hi，请阅读以了解将来的问题使用的是完整组件，而不是单个日期。我不认为每个日期都有工具提示。检查javascript源代码将有助于了解这一点，我需要在哪里查找？只有java library.look better；-）。（或者在该报告中搜索*.js，谢谢！这是我需要的正确方向的提示。

<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>