Skip to content

Latest commit

 

History

History
87 lines (71 loc) · 6.16 KB

HowToUpgradeToV4.md

File metadata and controls

87 lines (71 loc) · 6.16 KB

Upgrade from versions 1.9.*/2.* to version 4.*

Version 4 has seen a lots of improvements and new features, but also introduce breaking changes if you are trying to use it with an old v1.9 or v2 configuration.

Initialization

Initialization of an AutoNumeric object has changed a bit.
Since AutoNumeric is now an ES6 module, AutoNumeric being the name of the class, and since the jQuery dependency has been dropped, you now longer need to first select the DOM element with jQuery, then call the $(yourElement).autoNumeric('init', { options }) method, but only need to instantiate an AutoNumeric object using new AutoNumeric(yourElement, { options }) (or if you do not already have a reference to the DOM element, use new AutoNumeric('myCSSSeletor', { options })).

<= v2 (Before) v4 (After)
$('.myInput').autoNumeric('init', { options }); If you want to initialize only one element: new AutoNumeric('.myInput', { options });
If you want to initialize multiple elements: AutoNumeric.multiple('.myCssClass > input', { options });

Configuration

The old option names have changed and are now deprecated, in favor of the new ones.
To help you switch to the new names, detailed warning messages are displayed in the console if an old option name is detected.

Do note that the option mDec (or its new name decimalPlacesOverride if you used v2) is no longer used.
If you want to specify the number of decimals, instead of relying on the maximum number of decimal places in minimumValue or maximumValue like before, you can now set decimalPlaces to set it globally.
If you wish, you can also specify a different number of decimal places for the formatted value (with decimalPlacesShownOnFocus and decimalPlacesShownOnFocus) or the rawValue (with decimalPlacesRawValue).

<= v2 (Before) v4 (After)
aSep digitGroupSeparator
nSep showOnlyNumbersOnFocus
dGroup digitalGroupSpacing
aDec decimalCharacter
altDec decimalCharacterAlternative
aSign currencySymbol
pSign currencySymbolPlacement
pNeg negativePositiveSignPlacement
aSuffix suffixText
oLimits overrideMinMaxLimits
vMax maximumValue
vMin minimumValue
mDec decimalPlacesOverride
(Deprecated)
eDec decimalPlacesShownOnFocus
scaleDecimal decimalPlacesShownOnBlur
aStor saveValueToSessionStorage
mRound roundingMethod
aPad allowDecimalPadding
nBracket negativeBracketsTypeOnBlur
wEmpty emptyInputBehavior
lZero leadingZero
aForm formatOnPageLoad
sNumber selectNumberOnly
anDefault defaultValueOverride
unSetOnSubmit unformatOnSubmit
outputType outputFormat
debug showWarnings

If you want more detail about the AutoNumeric options, feel free to browse the AutoNumeric options source code which has detailed comment for each one.
Check out the new options on the official website here.

Method calls

Moreover, since we are now using an AutoNumeric object, we can now directly call its methods (and chain them if needed).
In the following table, the anElement variable is created using const anElement = new AutoNumeric('someSelector', { options }).

The methods are now called like so:

<= v2 (Before) v4 (After)
$(someSelector).autoFormat('1234.56', { options }); AutoNumeric.format(1234.56, { options });
$(someSelector).autoUnFormat('1.234,56 €', { options }); AutoNumeric.unformat('1.234,56 €', { options });
$(someSelector).autoValidate({ options }); AutoNumeric.validate({ options })
$.fn.autoNumeric.defaults AutoNumeric.getDefaultConfig()
$(someSelector).autoNumeric("destroy"); anElement.remove();
$(someSelector).autoNumeric('get'); anElement.getNumericString();
$(someSelector).autoNumeric('getArray'); anElement.formArrayNumericString();
$(someSelector).autoNumeric('getFormatted'); anElement.getFormatted();
$(someSelector).autoNumeric('getLocalized'); anElement.getLocalized();
$(someSelector).autoNumeric('getNumber'); anElement.getNumber();
$(someSelector).autoNumeric('getString'); anElement.formNumericString();
$.fn.autoNumeric.lang AutoNumeric.getPredefinedOptions()
$(someSelector).autoNumeric('reSet'); anElement.reformat();
$(someSelector).autoNumeric('set', '12345.67'); anElement.set(12345.67);
$(someSelector).autoNumeric('unSet'); anElement.unformat();
$(someSelector).autoNumeric("update", { options }); anElement.update({ options });
$(someSelector).autoNumeric("wipe"); anElement.wipe();

Check the methods documentation to see how some of those functions signatures changed.

If you encounter any problem upgrading to v4, feel free to contacts us on our Gitter channel or on IRC on Freenode #autoNumeric!