Cleave.js-Input Mask

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

<!-- cleave.js -->
<script src="{% static 'libs/cleave.js/dist/cleave.min.js'%}"></script>

<!-- form masks init -->
<script src="{% static 'js/pages/form-masks.init.js'%}"></script>

yarn add cleave.js --save

yarn remove cleave.js or you can remove package by removing specific package from package.json

Title Javascript

Date

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'] });`

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']
});

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'] });`

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' });`