Editor - format input field to decimal/currency

Editor - format input field to decimal/currency

michaelnmichaeln Posts: 8Questions: 4Answers: 0

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

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • michaelnmichaeln Posts: 8Questions: 4Answers: 0
    edited August 2016

    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.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • michaelnmichaeln Posts: 8Questions: 4Answers: 0

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • michaelnmichaeln Posts: 8Questions: 4Answers: 0

    I got it all working

    Thank you Allan

This discussion has been closed.