Flexible Form Input Text Format Library – Cleave.js

Category: Form , Javascript , Recommended | August 29, 2018
Author: nosir
Views Total: 2,479
Official Page: Go to website
Last Update: August 29, 2018
License: MIT

Preview:

Flexible Form Input Text Format Library – Cleave.js

Description:

Cleave.js is a simple lightweight JavaScript library used to restrict and format input text to a specific pattern (credit cards, phone numbers, dates, etc).

AMD and commonJS are supported. Also provides as a React component.

Basic usage:

You first have to include the Cleave.js library on the webpage.

<script src="cleave.min.js"></script>

Include an addon of your choice as this:

<script src="addons/cleave-phone.{country}.js"></script>

Create a new Cleave object, specify the target input field and pass in the options as follows:

new Cleave('.input', {
    // options here
});

All possible options.

// credit card
creditCard: true,
creditCardStrictMode: true,
onCreditCardTypeChanged: function () {},

// phone
phone: true,
phoneRegionCode: 'AU',

// date
date: true,
datePattern: ['d', 'm', 'Y'],

// time
time: true,
timePattern: ['h', 'm', 's'],

// numeral
numeral: true,
numeralDecimalScale: 2,
numeralDecimalMark: '.',
numeralThousandsGroupStyle: 'thousand',
numeralIntegerScale: 4,
numeralPositiveOnly: false,
stripLeadingZeroes: true,

// others
numericOnly: true,
uppercase: true,
lowercase: true,
prefix : '',
delimiter : '',
blocks: [],
delimiters: [],
delimiterlazyshow: true,
noImmediatePrefix: false,
rawValueTrimPrefix: false,
onValueChanged: function(){}

API methods.

// Gets raw value without any format pattern or delimiter
instance.getRawValue()

// Sets raw value, it will then apply formatting automatically
instance.setRawValue(value)

// Gets formatted pretty value
instance.getFormattedValue()

// Gets ISO format date value, this only works for date input type.
instance.getISOFormatDate()

// Destroy
instance.destroy()

// Sets / Changes country region code.
instance.setPhoneRegionCode(regionCode)

Changelog:

v1.4.4 (08/29/2018)

  • Update

Leave a Reply