CODEWITHSUNDEEP
jsfstring-formatting
brbrbr
brbrbr

Reputation: 157

JSF format an h:inputText while typing

I'm constructing a page with pure JSF.

On that page I've some field for dates... but I don't need a date picker. So I used an <h:inputText>

This is working when I type a valid date like 01/01/1970. But I need to type the "/".

I want to put some mask on this input. How can I do that?

Upvotes: 0

Views: 8573

Answers (2)

brbrbr
brbrbr

Reputation: 157

Solved with plain JS...

Added <f:ajax event="keypress" onevent="formatDate(this)"/> on inputText

and the function

function formatarData(obj) {
    if (obj.value.length == 2 || obj.value.length == 5) {
        obj.value += "/";
    }
    return;
}

Upvotes: 0

Ali Cheaito
Ali Cheaito

Reputation: 3846

You'll want to use jQuery or a JSF component library like Primefaces.

With Primefaces inputMask, you can do this

<p:inputMask id="date" value="#{maskView.date}" mask="99/99/9999"/>

Alternatively, if using jQuery, the jQuery Mask plugin provides similar functionality. It is used by simply locating the input element, then applying the mask() javascript function

$(document).ready(function(){
    $('.date').mask('00/00/0000');
});

If Primefaces and jQuery are not options, plain Javascript can always be used. A bit of warning thought, using plain JS for this will require a lot of work.

Upvotes: 3

Related Questions