In a Java project we are using PrimeFaces 2.2.1 as a JSF extension. We are implementing in a register form the data of schedule as "Load hours" separated in two fields, hours and minutes. We are using the Spinner (p:spinner component) as input element. However, we need to show the current data (only integers) in the format that show at least two numbers when value is less than 10.
Current input format
Needed input format
The body of the JSF tags look as this:
<div class="form_block">
<div class="form_item">
<h:outputText styleClass="form_item_label" value="Load Hours:"/>
<div class="form_item_field">
<p:spinner id="hora" styleClass="spinnerField" style="height: 12px !important; box-shadow: none !important; border-radius: 4px 0px 0px 4px;"
value="#{hour}" min="00" max="23"><f:convertNumber pattern="00" minIntegerDigits="2" type="number"/></p:spinner>:
<p:spinner id="minutos" styleClass="spinnerField" style="height: 12px !important; box-shadow: none !important; border-radius: 4px 0px 0px 4px;"
value="#{minutes}" min="00" max="59" maxlength="2"><f:convertNumber pattern="00" minIntegerDigits="2" type="number"/></p:spinner>
</div>
<div class="clear"></div>
</div>
</div>
We have also try formatting with f:convertNumber component within Spinner but seems to not work as we expect. Has anybody else had similar problems like this before? Any suggestions you might share? Thanks in advance
Note. We did not implement timepicker due to the fact we precise to handle each field (hours and minutes) separated.