Jquery Datepicker没有显示在点击p：inputText里面的p：tab中的primefaces中

Posted 2021-05-04

我正在使用jquery datepicker for primefaces calender。我刚刚创建了一个p：inputtext并在其上调用了jquery datepicker。当我将p：inputtext放在p：tab之外时，会调用此datepicker，但是当我将p：inputtext放在p：tab中时，它不会显示出来。

JQuery函数：

<script>
    $(function() {

        $('.calenderType').calendarsPicker();
});
    </script>

1）输入日历工作正常的文本：

<table>
   <tr>
    <td><p:inputText value="#{gen.appInitDate}" id="appInitDate"
                maxlength="100" onchange="changeEVENT();"
                disabled="#{gen.disableGen}"  class="calenderType">
        </p:inputText>
    </td>
    </tr>
</table>

2）输入日历不工作的文本：

    <p:tab titleStyle="font-weight:bold" title="#{lang.gen_info}" id="genInfoTabId"
        titleStyleClass="collapsible" >
    <p:panel id="geninfop" >
    <table>
        <tr>
            <td>
            <p:inputText value="#{gen.appInitDate}" id="id1"
               maxlength="100" onchange="changeEVENT();" 
               disabled="#{gen.disableGen}" class="calenderType">
            </p:inputText>
            </td>
        </tr>
            </table>
        </p:panel>
        </p:tab>

</p:accordionPanel>

基本上在2）场景中p：inputtext在p：tab中，所以任何jquery fucntion都没有调用它，因为jquery日历不起作用。请为此提出一些解决方案。

答案

我通过更改jquery代码完成了它，如下所示：

<script>
    $(function() {
        $('.calenderType').calendarsPicker();
        setInterval(function(){
            $('.calenderType').calendarsPicker();},100);
});
    </script>

只需每0.1秒调用一次该功能，它就可以工作..