I´m having trouble with p:calender in relation to mobile render kit in PF5. The style is lost as soon as you do an ajax update.
I found this difference in the generated html output for the component:
When initally rendered:
Code: Select all
<div id="visItem:idmaxBetalingsDato" class="ui-calendar ui-calendar-popup">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="visItem:idmaxBetalingsDato_input" class="hasDatepicker" type="text" name="visItem:idmaxBetalingsDato_input">
</div>
</div>
Code: Select all
<div id="visItem:idmaxBetalingsDato" class="ui-calendar ui-calendar-popup">
<input id="visItem:idmaxBetalingsDato_input" class="hasDatepicker" type="text" name="visItem:idmaxBetalingsDato_input">
</div>
I would really appreciate any suggestions for a workaround or a quick fix since we an application that we have ported from PF3.5.x, PFM 0.9.5 --> PF 5 that we need to have in production soon. I´m very sure that this problem is related to PF5.
NB: Problem can easily be reproduced by the following code:
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:pm="http://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE"/>
<h:head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</h:head>
<h:body>
<pm:page id="visItem" swatch="a">
<pm:header title="e-arkiv">
</pm:header>
<pm:content>
<h:form id="dokinfoForm">
<p:commandButton style="font-size:small;" styleClass="ui-btn-inline" icon="ui-icon-arrow-r" title="Næste" iconPos="right"
value="Næste" update="idmaxBetalingsDato" />
<p:outputLabel style="font-size: 12px " value="Nyeste dato: " />
<p:calendar id="idmaxBetalingsDato"
navigator="true"
pattern="dd-MM-yyyy">
</p:calendar>
</h:form>
</pm:content>
</pm:page>
</h:body>
</html>