I'm finally onboard with PrimeFaces Extensions, and I wanted to share a few things here.
OLD/PREVIOUS code prior to migration to PrimeFaces Extensions: p:calendar timeOnly="true" and "Save" p:commandLink (yuck!)
Code: Select all
<p:calendar id="reportTime" value="#{pf_ordersController.reportTime[0]}"
timeOnly="true" pattern="hh:mm a"
size="10" label="Report Time">
<f:convertDateTime pattern="hh:mm a" />
</p:calendar>
<h:outputText escape="false" value=" "/>
<h:outputText escape="false" value=" "/>
<p:commandLink id="saveReportTime" value="Save"
update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"
actionListener="#{pf_ordersController.reportTimeChangedOnAddEdit()}"/>
Code: Select all
<pe:timePicker id="reportTime" value="#{pf_ordersController.reportTime[0]}"
label="Report Time" mode="popup" showPeriod="true" style="width: 100px;">
<p:ajax event="close" listener="#{pf_ordersController.reportTimeChangedOnAddEditClose}"
update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"/>
</pe:timePicker>
Small recommendation (or friendly suggestion): to be consistent in showcase example for before/close event, you may want to use mode="popup" instead of default (mode="spinner").
FYI, I had to go with the OLD/PREVIOUS PrimeFaces code and provide a commandButton/Link, because I've seen some nasty bugs related to p:calendar, and p:calendar timeOnly="true" just did not meet my need/requirement at all, because if you want to use p:ajax with p:calendar timeOnly="true", then the slider would issue p:ajax after the 'first' small change via slider, and then no other AJAX requests are issued. Also, I split up the date and time, since the legacy app required the endusers to enter date and time, separately. Even worse than that, the time had to be 24-hour time for data integrity reasons since legacy app was dBase IV (MS-DOS) app they have been using since 1994/1995.
Question, suggestion, and statement:
Is it possible for pe:timePicker to have an HTML5 variant? I have endusers (including myself) that are accessing HTML_BASIC render kit xhtml pages via Android mobile, and if app detected that user is on mobile device (via user agent), I have code that uses p:inputText type="date|number|..." since p:inputText supports HTML5, and HTML5 is working great in/on mobile browsers with appropriate keyboards per p:inputText type="...". I know this is old news for you all, so I thought I might ask the question and/or make suggestion. Of course, I don't ever 'push' my needs; I don't mind spending time and developing my own solution to meet my own needs.
Oh, here is code that I have on the page I just edited (added pe:timePicker); it also has p:inputText HTML5 variant for mobile endusers/devices.
Code: Select all
<h:panelGrid columns="2" cellpadding="1" cellspacing="1"
rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}">
<h:outputText value="Trip Date:" />
<p:inputText id="tripDateOnMobile"
value="#{pf_ordersController.tripDate[0]}"
label="Trip Date" type="date">
<f:convertDateTime pattern="yyyy-MM-dd" />
<p:ajax partialSubmit="false"
update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"
listener="#{pf_ordersController.tripDateChangedOnAddEdit}"/>
</p:inputText>
<h:outputText value="Trip Time:" />
<p:inputText id="tripTimeOnMobile"
value="#{pf_ordersController.tripTime[0]}"
label="Trip Time" type="time">
<f:convertDateTime pattern="HH:mm" />
<p:ajax partialSubmit="false"
update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"
listener="#{pf_ordersController.tripTimeChangedOnAddEdit()}"/>
</p:inputText>
</h:panelGrid>
<h:panelGrid columns="3" cellpadding="1" cellspacing="1"
rendered="#{pf_usersController.loggedInViaAndroid == 'N'}">
<h:outputText value="Trip Date/Time:" />
<p:calendar id="tripDate" value="#{pf_ordersController.tripDate[0]}"
pattern="MM/dd/yyyy" navigator="true"
size="12" label="Trip Date">
<f:convertDateTime pattern="MM/dd/yyyy" />
<p:ajax partialSubmit="false" event="dateSelect"
listener="#{pf_ordersController.tripDateSelectedOnAddEdit}"
update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"/>
<p:ajax partialSubmit="false"
update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"
listener="#{pf_ordersController.tripDateChangedOnAddEdit}"/>
</p:calendar>
<pe:timePicker id="tripTime" value="#{pf_ordersController.tripTime[0]}"
label="Trip Time" mode="popup" showPeriod="true" style="width: 100px;">
<p:ajax event="close" listener="#{pf_ordersController.tripTimeChangedOnAddEditClose}"
update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"/>
</pe:timePicker>
</h:panelGrid>
