cleave

Format input text content when you are typing.

Please note, this field depend on the following library:

Special properties of field

cleaveOptions

For more details, see the official cleave.js documentation.

Usage

Credit card number formatting:

{
  type: "cleave",
  label: "Credit card number formatting",
  model: "credit",    
  cleaveOptions: {    
    creditCard: true,
    onCreditCardTypeChanged: function(type) {
      console.log("onCreditCardTypeChanged", type);    
    }
  }
}

Phone number formatting:

{
  type: "cleave",
  label: "Phone number formatting",
  model: "phone",    
  cleaveOptions: {        
    phone: true,
    phoneRegionCode: 'FR',
  }
}

Date formatting:

{
  type: "cleave",
  label: "Date formatting",
  model: "date",    
  cleaveOptions: {
    date: true,
    datePattern: ['d', 'm', 'Y'],
  }
}

Numeral formatting:

{
  type: "cleave",
  label: "Numeral formatting",
  model: "number",    
  cleaveOptions: {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    numeralDecimalScale: 2,
    numeralDecimalMark: '.',
  }
}

Custom formatting:

{
  type: "cleave",
  label: "Custom formatting",
  model: "special",    
  cleaveOptions: {
    blocks: [0, 2, 0, 3, 4],
    delimiter: ' ',
    delimiters: ['(', ')', ' ', '-', '-'],    
    numericOnly: true,
    uppercase: false,
    lowercase: false
  }
}

Last updated