How to use text-mask-addons - 10 common examples

this.delimiter = this.options.thousandsSeparator || separators.delimiter;
    }
    else {
      this.delimiter = '';
    }

    this.decimalLimit = getNumberDecimalLimit(this.component);

    // Currencies to override BrowserLanguage Config. Object key {}
    if (_.has(this.options, `languageOverride.${this.options.language}`)) {
      const override = _.get(this.options, `languageOverride.${this.options.language}`);
      this.decimalSeparator = override.decimalSeparator;
      this.delimiter = override.delimiter;
    }
    this.numberMask = createNumberMask({
      prefix: '',
      suffix: '',
      requireDecimal: this.component.requireDecimal ?? false,
      thousandsSeparatorSymbol: this.component.thousandsSeparator ?? this.delimiter,
      decimalSymbol: this.component.decimalSymbol ?? this.decimalSeparator,
      decimalLimit: this.component.decimalLimit ?? this.decimalLimit,
      allowNegative: this.component.allowNegative ?? true,
      allowDecimal: this.component.allowDecimal ?? !this.component.validate?.integer,
      fillGaps: this.component.decimalLimit && this.component.requireDecimal,
    });
  }

_createMask(props) {
    const maskOpts = {
      prefix: '', // override default of '$'
      allowDecimal: true,
      decimalLimit: null,
      allowNegative: true
    };

    MASK_PROPS.forEach(name => {
      if (props[name] !== undefined) {
        maskOpts[name] = props[name];
      }
    });

    this.set({ mask: createNumberMask(maskOpts) });
  }

}

        var mask;
        if (scope.component.inputMask) {
          // Text or other input mask, including number with inputMask.
          mask = formioUtils.getInputMask(scope.component.inputMask);
        }
        else if (format === 'currency') {
          maskOptions.prefix = scope.prefix;
          maskOptions.suffix = scope.suffix;
          // Currency mask.
          mask = createNumberMask(maskOptions);
        }
        else if (format === 'number') {
          // Numeric input mask.
          mask = createNumberMask(maskOptions);
        }
        else if (format === 'datetime') {
          mask = formioUtils.getInputMask((scope.component.format.replace(/[hHmMyYdD]/g, '9').replace(/[a]/g, 'P')));
          mask.forEach(function(item, index) {
            if (item === 'P') {
              mask[index] = /[AP]/;
              mask.splice(index + 1, 0, /[M]/);
            }
          });
        }

        // Set the mask on the input element.
        if (mask) {
          scope.inputMask = mask;
          maskInput({
            inputElement: input,

import React from 'react'
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'
import omit from '../../utils/omit'
import MaskedTextField, { maskedTextFieldPropTypes } from './MaskedTextField'

const mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]
const hint = 'MM/DD/YYYY'
const pipe = createAutoCorrectedDatePipe('mm/dd/yyyy')

const getValue = value => value

export const dateFieldPropTypes = omit(
  maskedTextFieldPropTypes,
  'type',
  'mask',
  'maskHint',
  'pipe',
  'getValue',
  'ref'
)

class DateField extends React.Component {
  static propTypes = dateFieldPropTypes

ngOnInit(): void {
    this.placeholder = this.military ? this.labels.timeFormatPlaceholder24Hour : this.labels.timeFormatPlaceholderAM;
    this.maskOptions = {
      mask: this.military ? [/\d/, /\d/, ':', /\d/, /\d/] : [/\d/, /\d/, ':', /\d/, /\d/, ' ', /[aApP上下]/, /[mM午]/],
      pipe: this.military ? createAutoCorrectedDatePipe('HH:MM') : createAutoCorrectedDatePipe('mm:MM'),
      keepCharPositions: false,
      guide: true,
    };
  }

ngOnInit() {
    this.userDefinedFormat = this.format ? !this.format.match(/^(DD\/MM\/YYYY|MM\/DD\/YYYY)$/g) : false;
    if (!this.userDefinedFormat && this.textMaskEnabled && !this.allowInvalidDate) {
      this.maskOptions = this.maskOptions || {
        mask: this.dateFormatService.getDateMask(),
        pipe: createAutoCorrectedDatePipe(this.format || this.labels.dateFormatString().toLowerCase()),
        keepCharPositions: false,
        guide: true,
      };
    } else {
      this.maskOptions = { mask: false };
    }
  }

ngOnInit(): void {
    this.placeholder = this.military ? this.labels.timeFormatPlaceholder24Hour : this.labels.timeFormatPlaceholderAM;
    this.maskOptions = {
      mask: this.military ? [/\d/, /\d/, ':', /\d/, /\d/] : [/\d/, /\d/, ':', /\d/, /\d/, ' ', /[aApP]/, /[mM]/],
      pipe: this.military ? createAutoCorrectedDatePipe('HH:MM') : createAutoCorrectedDatePipe('mm:MM'),
      keepCharPositions: false,
      guide: true,
    };
  }

it('should handle currency/locale pairs with decimal period and thousands comma separators', () => {
      const currency = 'USD';
      const locale = 'en-US';
      const expectedDecimalSymbol = '.';
      const expectedThousandsSeparatorSymbol = ',';
      createCurrencyMask(currency, locale);
      const options = createNumberMask.mock.calls[0][0];
      const actualDecimalSymbol = options.decimalSymbol;
      const actualThousandsSeparatorSymbol = options.thousandsSeparatorSymbol;
      expect(actualDecimalSymbol).toEqual(expectedDecimalSymbol);
      expect(actualThousandsSeparatorSymbol).toEqual(
        expectedThousandsSeparatorSymbol
      );
    });

it('should handle currency/locale pairs with no fractional part', () => {
      const currency = 'CLP';
      const locale = 'es-CL';
      const expectedAllowDecimal = false;
      const expectedDecimalLimit = 0;
      createCurrencyMask(currency, locale);
      const options = createNumberMask.mock.calls[0][0];
      const actualAllowDecimal = options.allowDecimal;
      const actualDecimalLimit = options.decimalLimit;
      expect(actualAllowDecimal).toEqual(expectedAllowDecimal);
      expect(actualDecimalLimit).toEqual(expectedDecimalLimit);
    });

render() {
    const newProps = {...this.props.input};

    newProps.disabled = this.props.disabled;
    newProps.onChange = this.forwardEvent(this.props.input.onChange);
    newProps.onBlur = this.forwardEvent(this.props.input.onBlur);

    return (
        
    );
  }
}