'JSF Primefaces p:calendar or p:datePicker is Not showing any calendar field

I am using Jsf primefaces version 8 and trying to show the calendar field in the xhtml page. But inspite all efforts, the popup calendar field is not displaying at all in the page.

My main.xhtml page contains a p:dialog and this dialog includes another xhtml page, dateEdit.xhtml. Inside the second xhtml, I am trying to have the p:datePicker or p:calendar field. But its not working.

Below is the piece of code from my main.xhtml page:

<p:dialog closable="true" visible="false" modal="true" id="dateDialog" widgetVar="dateDialog" resizable="false" showEffect="fade" hideEffect="fade"
            header="Date Edit" width="60%" height="50%" style="max-height:100%; overflow:auto; ">
            <ui:include src="dateEdit.xhtml" >
            </ui:include> 
        </p:dialog>

Below is the code snippet from the dateEdit.xhtml :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" >
    
<h:head>
    <f:facet name="last">
        <link type="text/css" rel="stylesheet" href="../jsfStyle.css" media="all"></link>
    </f:facet>
</h:head>
<h:body>

        <h:form id="formDtId" enctype="multipart/form-data" method="post" >

<p:outputPanel id="editProjectInfo">
            <h:panelGrid id="coreGrid" columns="3" style="margin-bottom:10px" cellpadding="7">
<p:outputLabel for="update_Date" value="Demo&nbsp;Date : " />
                <p:calendar id="update_Date" value="#{dateManagedBean.demoDate}" mode="popup" navigator="true" pattern="yyyy-MM-dd" style="font-size:8pt;" showOn="button" >
                    <f:convertDateTime type="date" pattern="yyyy-MM-dd" for="update_Date"></f:convertDateTime>
                </p:calendar>
</h:panelGrid>
        </p:outputPanel>
        
        </h:form>
        
</h:body>
</html>

But if I click on the button icon, no calendar is getting displayed. Nothing is happening.

I tried with the below code also, instead of p:calendar, but that also didn't work :

<p:datePicker id="update_Date" value="#{dateManagedBean.demoDate}" pattern="MM-dd-yyyy" showIcon="true" />

Kindly help to resolve this issue. Thanks.

jsf primefaces

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'JSF Primefaces p:calendar or p:datePicker is Not showing any calendar field

Sources

Related Questions