Cleave.js-Input Mask

OverviewOfficial Website

Cleave.js javaScript library for formatting input text content when you are typing.

Javascript
<!-- cleave.js -->
<script src="assets/libs/cleave.js/cleave.min.js"></script>
Initjs (Custom js)
<!-- form masks init -->
<script src="assets/js/pages/form-masks.init.js"></script>
Add Package
yarn add cleave.js --save
Remove Package
yarn remove cleave.js or you can remove package by removing specific package from package.json
Date Formatting
Title Javascript
Date
var cleaveDate = new Cleave('#cleave-date', {
    date: true,
    delimiter: '-',
    datePattern: ['d', 'm', 'Y']
});
Date Formatting
var cleaveDateFormat = new Cleave('#cleave-date-format', {
    date: true,
    datePattern: ['m', 'y']
});
Time Formatting
Title Javascript
Time
var cleaveTime = new Cleave('#cleave-time', {
    time: true,
    timePattern: ['h', 'm', 's']
});
    
Time Formatting
var cleaveTimeFormat = new Cleave('#cleave-time-format', {
    time: true,
    timePattern: ['h', 'm']
});
    
Custom Option
Title Javascript
Credit Card
var cleaveBlocks = new Cleave('#cleave-ccard', {
    blocks: [4, 4, 4, 4],
    uppercase: true
});
    
Delimiter
var cleaveDelimiter = new Cleave('#cleave-delimiter', {
    delimiter: '·',
    blocks: [3, 3, 3],
    uppercase: true
});
    
Delimiters
var cleaveDelimiters = new Cleave('#cleave-delimiters', {
    delimiters: ['.', '.', '-'],
    blocks: [3, 3, 3, 2],
    uppercase: true
});
    
Prefix
var cleavePrefix = new Cleave('#cleave-prefix', {
    prefix: 'PREFIX',
    delimiter: '-',
    blocks: [6, 4, 4, 4],
    uppercase: true
});
    
Phone
var cleaveBlocks = new Cleave('#cleave-phone', {
    delimiters: ['(', ')', '-'],
    blocks: [0, 3, 3, 4]
});
Numeral Formatting
var cleaveNumeral = new Cleave('#cleave-numeral', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});
    
© Velzon.
Design & Develop by Themesbrand