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) ponent 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 ponent. In the following screenshot you see a float 2.6f that was set and properly formatted in the "de_DE" locale (with a ma 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 ponent. 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 ponent.

Has anybody else had similar problems like this before?

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

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) ponent 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 ponent. In the following screenshot you see a float 2.6f that was set and properly formatted in the "de_DE" locale (with a ma 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 ponent. 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 ponent.

Has anybody else had similar problems like this before?

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

• javascript
• jsf
• jsf-2
• primefaces

• It looks like there is movement on this topic towards PF 7.1. – Selaron Commented Aug 22, 2019 at 8:52

2 Answers 2

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

Seems like Primefaces Spinner does not support I18N.

A forum message asking to support locales has been posted since 2010 without any answer : http://forum.primefaces/viewtopic.php?f=3&t=6398

A possible solution would be to use Primefaces' Extension ponent timePicker and customize it to manage your value. See : http://www.primefaces/showcase-ext/sections/timePicker/basicUsage.jsf;jsessionid=7axadfz6by4g1787ncndsf12d And : https://github./primefaces-extensions/primefaces-extensions.github./wiki/PrimeFaces-Extensions-Locales

Or you could try to mess with JS...