OverviewOfficial Website

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

Javascript
<!-- inputmask.js -->
<script src="assets/libs/inputmask/min/jquery.inputmask.bundle.min.js"></script>
Initjs (Custom js)
<!-- form masks init -->
<script src="assets/js/pages/form-masks.init.js"></script>
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'
});
© Minible.