PrimeFaces Spinner with German locale

Question

In a Java web project we are using PrimeFaces 4.0 as a JSF extension. Now we ran into a problem with the Spinner (p:spinner) component in PrimeFaces. We embedded the spinner in our own custom tag to set some defaults such as the stepFactor and the locale. The body of the JSF tag looks like this:

    <p:spinner id="#{id}" value="#{value}" min="#{min}" max="#{max}" stepFactor="0.1" size="5" onchange="#{onchange}" >
        <f:convertNumber pattern="#0.00" locale="de_DE"/>
    </p:spinner>

This works fine as for the binding and the rendering of the component. In the following screenshot you see a float 2.6f that was set and properly formatted in the "de_DE" locale (with a comma instead of a dot as the decimal separator).

However, when the user uses the spinners buttons to change the value the formatting immediately gets wrong. The value is even parsed wrong from the component. In the next screenshot you can see the very same spinner once we clicked the "up" button once. Which should actually result in a value of "2,70" being displayed in the component.

Has anybody else had similar problems like this before?

Is there a standard fix to the JavaScript handling the p:spinner component that we can apply here or do we really need to dig into PrimeFaces JS library and fix this on our own?

Answer 1

f:convertNumber is a server-side conversion. The event of incrementing and decrementing the value is JavaScript, the f:convertNumber won't be taken into consideration until the value goes back to server, therefore an ugly JavaScript solution should be done.

I have created a patch for this problem and I used Number.prototype.toLocaleString() to convert the number into a localized version.

All you have to do is include pf.spinner.local.fix.js and set your preferred locale in the following way (in document.ready):

PF('spinnerWidgetVarName').cfg['local'] = 'de-DE';

There are a couple of notes to be taken:

• Number.prototype.toLocaleString()

• This patch is tested and confirmed on PrimeFaces 5.0 and 4.0

Here's a small example on github and a Demo