PrimeFaces Extensions Showcase

Timer

There are various ways to format the value of the Timer.

Default: simply display the seconds remaining
Percentage: display the reaming time as a percentage value
Human: use the Moment.JS Humanize function to print an human readable interval
Locale: use a Moment.JS internationalization. For example de, fr
Custom: use a Moment.JS format. For example HH:mm:ss
Function: you can simply pass any JavaScript function to format the timer value.

Default	Percentage	Human	Locale (de)	Custom	Custom with locale (fr)	Function

Source

XHTML page


<script>
    window.formatMe = function(value){
        return "The End is near (" + value + ")";
    };
    moment.locale('de', { relativeTime : { mm : '%d minuten' } });
    moment.locale('fr', { months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_') });
</script>
<h:panelGrid columns="7">
    <h:outputText value="Default"/>
    <h:outputText value="Percentage"/>
    <h:outputText value="Human"/>
    <h:outputText value="Locale (de)"/>
    <h:outputText value="Custom"/>
    <h:outputText value="Custom with locale (fr)"/>
    <h:outputText value="Function"/>
    <pe:timer
        timeout="1000"/>
    <pe:timer
        timeout="1000"
        format="percentage"/>
    <pe:timer
        timeout="1000"
        format="human"/>
    <pe:timer
        timeout="1000"
        format="human" 
        locale="de"/>
    <pe:timer
        timeout="1000"
        format="HH:mm:ss"/>
    <pe:timer
        timeout="1000"
        format="MMMM"
        locale="fr_FR"/>
    <pe:timer
        timeout="1000"
        formatFunction="return formatMe(value);"/>
</h:panelGrid>