Editor - format input field to decimal/currency

michaeln

When I click New/Update, a modal is show up. I would like to format the input field "Salary" so that it shows as currency or decimal format

When users enter

1000 -> it shows as $ 1,000 or 1,000
123456789 -> it shows as $ 1,234,567,890 or 1,234,567,890

allan

I presume that you want it to be stored in the database as a number though? If so, try the masked inputs plug-in.

Allan

michaeln

You are correct. It works but with 1 tiny error

When I edit entry, the masked field shows up normal as 10000 not 10,000

When i type something then it is formatted correctly.

{
    label: "Salary:",
    name: "salary",
    type: "mask",
    mask: "#,##0",
    maskOptions: {
      reverse: true,
      placeholder: ""
    }
  }

1 more question: can I have a limit on the masked input ? Users can enter up to 5 digits (99,999), when they try to enter 1 more digit, the masked input wont let them.

allan

can I have a limit on the masked input ?

The mask.js library is third party, but not sure what its full set of options are I'm afraid. I don't immediately see such an option in their documentation, but I might have missed it.

Regards,
Allan

michaeln

i put together a working demo

need to set maxlength of the input. I dont think Editor supports it right now.

Another question is how to force masked input to format fields in Edit modal when the fields are loaded ? Please see attached screenshot

allan

You can set HTML attributes on the input element using the attr option. e.g.:

attr: {
  maxlength: 5
}

if that works with mask (which it appears it does), then that's the way to do it.

Another question is how to force masked input to format fields in Edit modal when the fields are loaded ?

I will look into this and get back to you.

Regards,
Allan

allan

it looks like the Mask plug-in was updated and listens for a new event which the Editor plug-in wasn't triggering on setting a value. I've just updated the plug which will work as expected now.

Allan

michaeln

I got it all working

Thank you Allan