p：日历没有弹出

Question

我知道有几次被问过，但我找不到解决办法。我正在尝试使用p:calendar但它没有弹出，只是文本字段显示。其他组件工作正常。我正在使用PrimeFaces 5.3和mojarra 2.2。我也在使用jsf模板。我尝试在此视图中添加主模板文件以及<h:head>标记。日历显示在对话框组件中。这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:metadata>
            <f:viewAction actionListener="#{providerController.onLoad()}" />
        </f:metadata>
    </h:head>

    <h:body>
        <ui:composition template="/Views/Template/MainTemplate.xhtml">
            <ui:define name="pageTitle">
            Welcome [Dashboard.xhtml]
            </ui:define>

            <ui:define name="mainContent">
            <h:outputScript library="primefaces" name="jquery/jquery.js"/>

                <h2>Provider Details</h2>
 <p:calendar id="cal"  showOn="button" />
                <h:form rendered="#{providerController.canCreateProvider()}">
                    <p:commandButton value="Create" update=":myForm"
                        action="#{providerController.createProviderClicked()}"
                        oncomplete="PF('Dlg1').show();" />
                    <br />
                </h:form>

                <h:form id="mainForm">
                    <p:dataTable value="#{providerController.providerList}"
                        var="provider">

<!--    <p:inputText value="#{providerController.providerSearchText}">
                        <f:ajax event="change" listener="#{providerController.providerSearchTextChanged()}"></f:ajax>
                        </p:inputText> -->
                        <p:column headerText="Provider Name" filterMatchMode="contains" filterBy="#{provider.getFullName()}">

                            #{provider.getFullName()}
                        </p:column>

                        <p:column headerText="Npi Number">
                            #{provider.npiNum}
                        </p:column>

                        <p:column headerText="Entity">
                            #{provider.centity.name}
                        </p:column>

                        <p:column headerText="Practices">
                            <table>
                                <ui:repeat value="#{provider.practiceList.toArray()}" var="t">
                                    <tr>
                                        <td style="border: 0px;"><h:outputText value="#{t.name}" />
                                        </td>
                                    </tr>
                                </ui:repeat>
                            </table>

                            <!--                     <p:selectOneMenu id="advanced"
                                 panelStyle="width:180px"
                                effect="fade" var="t" style="width:160px">
                                <f:selectItems value="#{provider.practiceList.toArray()}" var="practise"
                                    itemLabel="#{practise.name}" itemValue="#{practise}" />

                                <p:column>
                                    <h:outputText value="#{t.name}" />
                                </p:column>

                            </p:selectOneMenu>  -->
                        </p:column>

                        <p:column headerText="Edit" width="80"
                            rendered="#{providerController.canEditProvider()}">
                            <p:commandButton icon="ui-icon-pencil" update=":myForm"
                                oncomplete="PF('Dlg1').show();"
                                action="#{providerController.updateClicked(provider)}" />

                            <p:commandButton icon="ui-icon-close" update=":mainForm"
                                resetValues="true"
                                action="#{providerController.removeClicked(provider)}"
                                rendered="#{providerController.shouldShowDelete()}">

                                <p:confirm header="Confirmation" message="Are you sure?"
                                    icon="ui-icon-alert" />
                            </p:commandButton>

                            <p:confirmDialog global="true" showEffect="fade"
                                hideEffect="fade">
                                <p:commandButton value="Yes" type="button"
                                    styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                                <p:commandButton value="No" type="button"
                                    styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                            </p:confirmDialog>

                        </p:column>
                    </p:dataTable>
                </h:form>

                <!-- ADD / EDIT DIALOG -->

                <p:dialog id="providerDialog" header="Provider" modal="true"
                    position="top" widgetVar="Dlg1" minHeight="40">

                    <h:form id="myForm">
                        <p:messages id="msgs" />

                        <h:panelGrid columns="2" cellpadding="8">
                            <p:outputLabel id="entity"
                                value="#{providerController.getFirstEntityName()}"
                                rendered="#{providerController.isSingleItemInEntityList()}" />

                            <p:selectOneMenu id="entities"
                                value="#{providerController.currentEntity}"
                                panelStyle="width:180px" effect="fade" required="true"
                                style="width:177px"
                                rendered="#{!providerController.isSingleItemInEntityList()}"
                                disabled="#{providerController.getIsEntityListDisabled()}">

                                <p:ajax listener="#{providerController.onEntityChange}"
                                    update="myPractices" />

                                <f:selectItem itemLabel="Select Entity" />
                                <f:selectItems value="#{providerController.entityList}"
                                    var="entity" itemLabel="#{entity.name}"
                                    itemValue="#{entity.getId()}" />

                                <!-- <p:column>
                                    <h:outputText value="#{t.name}" />
                                </p:column> -->
                            </p:selectOneMenu>

                            <p:selectCheckboxMenu id="myPractices"
                                value="#{providerController.selectedPractices}"
                                label="Select Practices" filter="true"
                                filterMatchMode="startsWith" style="width:177px" var="t"
                                panelStyle="width:250px">

                                <f:selectItems value="#{providerController.practiceList}"
                                    var="practice" itemLabel="#{practice.name}"
                                    itemValue="#{practice.getId()}" />

                                <!-- <p:column>
                                    <h:outputText value="#{t.name}" />
                                </p:column> -->

                            </p:selectCheckboxMenu>

                            <!-- <p:selectCheckboxMenu value="#{providerController.selectedPayers}" label="Select Payers"
                            filter="false" filterMatchMode="startsWith" style="width:177px"  var="t" required="true"
                            converter="payerConverter" panelStyle="width:250px">

                            <f:selectItems value="#{providerController.payerList}" var="payer"
                                itemLabel="#{payer.name} #{payer.planName}" itemValue="#{payer}"  />

                            <p:column>
                                <h:outputText value="#{t.name}" />
                            </p:column>

                        </p:selectCheckboxMenu>  -->

                            <p:inputText id="NpiNumber"
                                value="#{providerController.provider.npiNum}"
                                placeholder="Npi Number" maxlength="10" label="NPI"
                                required="true"
                                validatorMessage="NPI should only digits and length 10">
                                <!--  validator="npiValidator" -->
                                <f:validateRegex for="NpiNumber" pattern="[0-9]{10}" />
                                <!-- <f:convertNumber integerOnly="true"/> -->

                            </p:inputText>
                            <p:inputText value="#{providerController.provider.firstName}"
                                placeholder="First Name" label="FirstName" required="true" />
                            <p:inputText value="#{providerController.provider.lastName}"
                                placeholder="Last Name" label="Last Name" required="true" />

                        </h:panelGrid>

                        <br />
                        <h:dataTable id="filesTable"
                            value="#{providerController.documentCells}" var="docCell">

                            <p:column>
                            <p:calendar id="cal" value="#{docCell.document.effectiveDate}" showOn="button" />
                                <p:row style="border: 3px solid blue;">
                                    <b><h:outputLabel for="fileUpload"
                                            value="#{docCell.lbName}" styleClass="#{docCell.getColorClassName()}" /></b>
                                    <br />

                                    <h:outputLabel value="Existing File: " for="idFileName" styleClass="#{docCell.getColorClassName()}" />
                                    <h:outputLabel id="idFileName"
                                        value="#{docCell.document.orignalName}" styleClass="#{docCell.getColorClassName()}" />
                                    <br />
                                    <p:fileUpload value="#{docCell.document.orignalName}"
                                        fileUploadListener="#{providerController.handleFileUpload}"
                                        mode="advanced" dragDropSupport="false" fileLimit="3"
                                        sizeLimit="5242880" allowTypes="/(.|/)(pdf|doc?x|png|txt)$/"
                                        update=":myForm" label="Browse..." 
                                        >

                                        <f:attribute name="name" value="#{docCell}" />

                                    </p:fileUpload>
                                </p:row>
                            </p:column>

                            <p:column headerText="Remove">

                                <p:commandButton icon="ui-icon-trash"
                                    action="#{providerController.deleteFileClicked(docCell)}"
                                    update=":myForm">

                                    <p:confirm header="Confirmation" message="Are you sure?"
                                        icon="ui-icon-alert" />
                                </p:commandButton>

                                <p:confirmDialog global="true" showEffect="fade"
                                    hideEffect="fade">
                                    <p:commandButton value="Yes" type="button"
                                        styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                                    <p:commandButton value="No" type="button"
                                        styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                                </p:confirmDialog>

                            </p:column>


                        </h:dataTable>

                        <p:commandButton id="btnSave" value="Save" validateClient="true"
                            actionListener="#{providerController.saveInfo}"
                            update="msgs, :mainForm" />




                        <p:blockUI trigger="myForm:btnSave" block="providerDialog">
            LOADING<br />
                            <p:graphicImage value="/Images/loading.gif" width="75"
                                height="75" />
                        </p:blockUI>
                    </h:form>


                </p:dialog>


                <style>
#providerDialog {
    position: absolute !important;
}

.red{color:red}
.green{color:green}
</style>
            </ui:define>
        </ui:composition>
    </h:body>
</html>