Money Input

Money Input is used to display the monetary values on the interface. There are three states of Money Input:

Examples

Presentation State

$968,431.65

968,431.65 HKD

Code Snippet


$968,431.65
968,431.65 HKD


Read Only State

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

Code Snippet






Editable State

If we are not using the type="number" HTML5 attribute, then we should use the inputmode attribute which gives the browser a hint for which keyboard to display. A HTML5 number field does not support characters such as commas which is required in this design.

Code Snippet


Pezzi Component

Component input parameters

Parameter Values Default Functionality
container String N/A jQuery selector where component will be rendered
state Vendavo.componentModes.FORM_WRITE , Vendavo.componentModes.FORM_READ, Vendavo.componentModes.PRESENTATION N/A It refers how a component is rendered, see above state section
value Number N/A Actual value displayed in component
negative Boolean false Enable/Disable negative sign
precision Integer 2 Precision for formating of number
delimiter ',' '.' '.' Delimter which should be used during input
formMode mixin Used for keeping information for state FORM_WRITE
formMode.items Array of Objects [{key: 'USD', label: 'Dollars'}, ...] these items will be displayed in selector
formMode.default String If value mach with any key in formMode.items then that record is pre-selected. Otherwise the first item is selected.
money String Used in FORM_READ/PRESENTATION. Contains money ISO code.
onMeasureChange function Callback on measure change event
onValueChange function Callback for value change event
locales Array [en-US] Locales used for formatting of numbers

Playground With Examples