Dynamically formatting phone number or date fields | Community
Skip to main content
deepakt84913413
Level 4
Mar 1, 2018 12:25 AM UTC
Solved

Dynamically formatting phone number or date fields

How do I format Phone number or date fields using rule editor?

I am able to format it after focusout of the field, but I am looking into how to do that dynamically while the user types in.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
James_R_Green
James_R_GreenAccepted solution
Level 6
Mar 1, 2018 11:31 PM UTC

deepakt84913413​

You may already know, but the out of the box way to handle formatting is the "Display Pattern" on a field:

This is triggered when you exit the field and will reformat according to the pattern - I would recommend doing this.

If you really need to format as you type, you could do something like this on the "Initialize" trigger of a field, to add a listener as @navinkaushal suggested.

var $el = $("#" + this.id + " input" );

$el.keyup(function (el) {   

     var $element = $(el.target);

     var elementValue = $element.val();

     var upperCaseValue =  $element.val().toUpperCase();

     $element.val(upperCaseValue);

});

Thanks,

James

3 replies

James_R_Green
James_R_GreenAccepted solution
Level 6
Mar 1, 2018 11:31 PM UTC

deepakt84913413​

You may already know, but the out of the box way to handle formatting is the "Display Pattern" on a field:

This is triggered when you exit the field and will reformat according to the pattern - I would recommend doing this.

If you really need to format as you type, you could do something like this on the "Initialize" trigger of a field, to add a listener as @navinkaushal suggested.

var $el = $("#" + this.id + " input" );

$el.keyup(function (el) {   

     var $element = $(el.target);

     var elementValue = $element.val();

     var upperCaseValue =  $element.val().toUpperCase();

     $element.val(upperCaseValue);

});

Thanks,

James

Translate
deepakt84913413
Level 4
Mar 1, 2018 8:56 PM UTC

Yeah. I was trying out a bunch of code for that but it has not been possible as of now. I was trying to see if anyone has any example code for that.

Translate
navinkaushal
Level 4
Mar 1, 2018 5:29 AM UTC

Add some custom JavaScript code onReady of form or onBlur/onKeypress/Keydown event of those field. You can put your own custom logic.

There are many formatted libraries available, can use them too.

Translate