Primefaces Calendar only works with popup button

Question

The issues I am having is with the prime faces calendar input field. At you moment I have it working fine using the popup button. So you click the button and the calendar appears so you can select a date. The required affect for the page I'm working on however is that the calendar will appear when the input field has focus.

On the Primesfaces Calendar Showcase the functionality I'm looking for is shown in the example labeled "Popup".

From the examples on the site I assumed, possibly naively, that all i had to do to change from button to focus activated calendar was to remove the showOn="button" attribute.

Before:

                    <p:calendar id="fldDateOfBirth"
                    value="#{pc_CreatePatient.patient.dateOfBirth}"
                    binding="#{pc_CreatePatient.dobComp}" navigator="true"
                    display="inline" pattern="dd/mm/yyyy" yearRange="-100"
                    title="#{msg.user_date_format_default_tip}" showOn="button" />

After:

                    <p:calendar id="fldDateOfBirth"
                    value="#{pc_CreatePatient.patient.dateOfBirth}"
                    binding="#{pc_CreatePatient.dobComp}" navigator="true"
                    display="inline" pattern="dd/mm/yyyy" yearRange="-100"
                    title="#{msg.user_date_format_default_tip}"/>

After making the change the portlet doesn't render at all and the logs hold the error information below:

[11/19/12 18:47:30:942 GMT] 00000043 RpmMaintainUs E RpmExceptionHandler handle Throwable=>class java.lang.IllegalArgumentException<==>component identifier must not be a zero-length Stringnent identifier must not be a zero-length Stringcomponent identifier must not be a zero-length String

Thank you in advance for any help with this.

Answer 1

You should use this and it will work just fine:

 <p:calendar id="fldDateOfBirth"
 value="#{pc_CreatePatient.patient.dateOfBirth}"
 title="#{msg.user_date_format_default_tip}"/>

The selected date will be displayed in your popup line. If you want to use the selected date in somewhere else:

<h:outputText value="Popup Date:" />  
            <h:outputText value="#{pc_CreatePatient.patient.dateOfBirth}" id="popupDate">  
                <f:convertDateTime pattern="d/M/yyyy"/>  
            </h:outputText> 

Answer 2

I found that the solution to my problem was that to markup a calendar input field without a button you need to remove a number of attributes. I originally thought that you only needed to remove 'showOn="button"' but I also had to remove 'display="inline"' to get it to work. Final mark up below:

                    <p:calendar id="fldDateOfBirth"
                    value="#{pc_CreatePatient.patient.dateOfBirth}"
                    binding="#{pc_CreatePatient.dobComp}" navigator="true"
                    pattern="dd/mm/yyyy" yearRange="-100"
                    title="#{msg.user_date_format_default_tip}"/>

I realise this is probably a rookie issue but I have to say I didn't find the primefaces website very helpful in the actual implementation of some of it's toys. If anyone has any good sites or tutorials for the primefaces library please add to the comments.