Dynamically formatting phone number or date fields | Community
Skip to main content
deepakt84913413
New Participant
March 1, 2018
Solved

Dynamically formatting phone number or date fields

  • March 1, 2018
  • 3 replies
  • 3246 views

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.
Best answer by James_R_Green

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
New Participant
March 1, 2018

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

deepakt84913413
New Participant
March 1, 2018

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.

navinkaushal
New Participant
March 1, 2018

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.