The calendar component of primefaces does not show the calendar

Question

The calendar component of primefaces does not show the calendar

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

As the title indicates, I am developing a web application with Primefaces in which I use the calendar component. In most cases the component works correctly, however, in some cases the component does not show the calendar. Instead, it is displayed as if it were a simple text field with autocomplete (see image).

The code for that component is as follows:

<p:dialog
            header="Generar Paro"
            id="dlgGenerarParo"
            closable="false" closeOnEscape="false"
            width="820" modal="true"
            widgetVar="dlgGenerarParo">

        <p:layout style="width: 810px; height: 420px;">

            <p:layoutUnit position="center">
                <p:panelGrid style="border: 0;height:150px;" columns="2" rendered="true">


                    <h:outputText value="Estado:"/>
                    <h:outputText
                            id="txtEstadoParo"
                            style="font-weight: bold;"
                            value="#{monitorizadorCentroControlador.generarParoBean.arbolEstadosBean.estadoSeleccionadoDescripcion}"/>

                    <h:outputText value="Fecha inicio paro:"/>
                    <p:calendar locale="es"
                                id="calFInicioParo"
                                showOn="button"
                                widgetVar="calFInicioParo"
                                value="#{monitorizadorCentroControlador.generarParoBean.fechaInicioParo}"
                                pattern="MM/dd/yyyy HH:mm:ss"/>

                    <h:outputText value="Fecha fin paro:"/>
                    <p:calendar locale="es"
                                id="calFFinParo"
                                showOn="button"
                                widgetVar="calFFinParo"
                                value="#{monitorizadorCentroControlador.generarParoBean.fechaFinParo}"
                                pattern="MM/dd/yyyy HH:mm"/>
                </p:panelGrid>
            </p:layoutUnit>

            <p:layoutUnit style="border: 0;" size="100" position="south">

                <p:messages closable="true" autoUpdate="true" for="generarParoMessages" showDetail="true"
                            showSummary="false"/>
                <p:panelGrid columns="2" style="text-align: center; width: 50%; border: 0;">
                    <p:commandButton
                            value="Aceptar"
                            actionListener="#{monitorizadorCentroControlador.confirmarGenerarParo}"/>
                    <p:commandButton
                            value="Cancelar"
                            actionListener="#{monitorizadorCentroControlador.cancelarGenerarParo}"/>
                </p:panelGrid>

            </p:layoutUnit>
        </p:layout>

    </p:dialog>

The only noticeable difference from the correctly functioning calendar controls is that I am using the control in a dialogue, which is likely to be influencing its operation.

java primefaces jsf

asked by hecnabae 31.05.2016 в 09:29

source

3 answers

Modal form, javascript, ajax and php Help for git with xCode

score 1 · Answer 1

try this structure:

 <p:calendar value="#{bean.fecha}" id="fecha"
        navigator="true" showOn="button" pattern="dd/MM/yyyy" locale="es"
        converterMessage="tu mensaje" yearRange="c-120:c" mindate="01/01/1900"                               
        size="25" styleClass="tuStilo">
        <p:ajax event="dateSelect" listener="tuValidacion"
            update="@form" process="@this"/>                       
        <f:convertDateTime pattern="dd/MM/yyyy"/>
 </p:calendar>

score 0 · Answer 2

0

remove the showOn from the calendar, if you want it to appear when you focus, otherwise it would come out when you click the button on the right

answered by 31.05.2016 в 18:33

score 0 · Answer 3

If in some cases the component works well and in others it does not, that means that something is preventing the correct functioning under specific conditions. I think the problem is in the javascript or css that occupies primefaces to display the calendar. The conflict would be that you are adding some other scrypt or css that overcomes and generates the problem, try disabling the additional scries or css and if it works again you know where the problem is.